/* ===== LOGIN_PAGE.CSS (Revamped for Light Theme) ===== */

/* Import Poppins and Alice fonts if not globally imported elsewhere */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Alice&display=swap');

/* Inherit core root variables for consistency */
:root {
    --primary-cyan: #00bcd4;
    --primary-cyan-dark: #00acc1;
    --primary-cyan-light: #b2ebf2; /* Will be less used on a light background, but good to keep */

    /* Text colors - these are crucial for a light theme */
    --text-accent: #c1b2a3; /* May be too dark for general text, adjust as needed */
    --heading-accent: #897b70; /* May be too dark for headings, adjust as needed */
    --dark-text: #333; /* Primary text color for light backgrounds */
    --light-text: #f8f9fa; /* Used for text *on* dark elements like buttons */
    --white: #ffffff; /* Primary background and card color */
    --black: #000000;

    /* Backgrounds - adjusted for light theme */
    --bg-light-primary: #f0f2f5; /* A very subtle light grey background */
    --card-bg-light: #ffffff; /* Explicitly white for cards */
    --card-border-light: #e0e0e0; /* Light border for cards */

    /* Glassmorphism elements are less prominent on light, but can be adapted for subtle effects */
    /* If you still want subtle glass, consider rgba(255, 255, 255, 0.7) for bg and lighter border */
    /* For this light theme, I'll default to solid white cards unless specified. */

    --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.05); /* Lighter shadows for light theme */
    --shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-heavy: 0 16px 64px rgba(0, 0, 0, 0.15);

    --gradient-primary: linear-gradient(135deg, var(--primary-cyan) 0%, var(--primary-cyan-dark) 100%);
    --gradient-text: linear-gradient(135deg, var(--primary-cyan) 0%, var(--primary-cyan-dark) 100%); /* For gradient text */

    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --border-radius-sm: 8px;
    --border-radius-md: 16px; /* Consistent with your homepage's card/element rounding */
    --border-radius-lg: 24px; /* Consistent with your homepage's card/element rounding */
    --border-radius-pill: 50px;
}

body {
    /* Match the light background of your homepage */
    background-color: var(--bg-light-primary); /* A very subtle light grey for the page background */
    font-family: 'Alice', serif; /* Default to Alice as per your homepage body style */
    font-size: 18px; /* Consistent base font size */
    color: var(--dark-text); /* Dark text for light background */
    line-height: 1.6;
    min-height: 100vh; /* Ensure it takes full viewport height */
    display: flex; /* Helps with centering the card */
    justify-content: center;
    align-items: center;
}

/* Card Styling (Login Form Container) */
.card {
    /* Use solid white background for the card */
    background: var(--card-bg-light);
    margin-bottom: 5%;
    border: 1px solid var(--card-border-light); /* Light border for definition */
    border-radius: var(--border-radius-lg); /* Consistent large radius */
    box-shadow: var(--shadow-medium); /* A lighter shadow for the card on a light background */
    overflow: hidden; /* Ensures shadow respects border-radius */
    transition: var(--transition-smooth); /* Smooth transitions */
}

/* Card Title */
.card-title {
    font-family: 'Poppins', sans-serif; /* Consistent heading font */
    font-weight: 700;
    color: var(--dark-text); /* Dark text for headings on light background */
    font-size: 2.2rem;
}

/* Lead text below title */
.card-body > p.text-center.text-muted {
    font-family: 'Alice', serif; /* Consistent body text font */
    color: var(--dark-text); /* Darker text for lead on light background */
    opacity: 0.7; /* Slightly muted */
    font-size: 1.05rem;
}

/* Form Labels */
.form-label {
    font-family: 'Poppins', sans-serif; /* Labels in Poppins */
    font-weight: 500;
    color: var(--dark-text); /* Dark text for labels */
    opacity: 0.9; /* Slightly lighter than pure dark */
    margin-bottom: 0.5rem;
}

/* Input Fields */
.form-control {
    background-color: var(--white); /* White background for inputs */
    border: 1px solid var(--card-border-light); /* Light border for inputs */
    color: var(--dark-text); /* Dark text input */
    border-radius: var(--border-radius-md); /* Consistent border radius */
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    transition: var(--transition-smooth);
}

.form-control::placeholder {
    color: var(--dark-text); /* Muted placeholder text */
    opacity: 0.5;
}

.form-control:focus {
    border-color: var(--primary-cyan); /* Cyan highlight on focus */
    box-shadow: 0 0 0 0.2rem rgba(0, 188, 212, 0.25); /* Cyan glowing shadow on focus */
    background-color: var(--white); /* Ensure background remains white on focus */
    color: var(--dark-text); /* Ensure text remains dark on focus */
}

/* Form Errors */
.form-error {
    color: #dc3545 !important; /* Standard red for errors, or adjust to a muted red if preferred */
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* Primary Button (Login Button) */
.btn-primary {
    /* Apply your custom primary button gradient and styling */
    background: var(--gradient-primary);
    color: var(--light-text); /* Light text for buttons on dark gradient */
    padding: 0.875rem 1.75rem;
    border-radius: var(--border-radius-pill); /* Pill shape */
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-medium); /* Use a medium shadow for buttons */
    border: none; /* Remove default border */
    position: relative;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

.btn-primary:hover {
    transform: translateY(-3px); /* Subtle lift on hover */
    box-shadow: 0 10px 25px rgba(0, 188, 212, 0.35); /* Stronger shadow on hover */
    background: var(--gradient-primary); /* Ensure gradient stays */
    border-color: transparent; /* No border on hover */
    color: var(--light-text); /* Ensure text remains light */
}

/* Horizontal Rule */
hr {
    border-color: var(--card-border-light); /* Light separator */
}

/* Links */
a {
    color: var(--primary-cyan); /* Cyan for links */
    transition: var(--transition-smooth);
    text-decoration: none; /* Ensure no underline unless specified */
}

a:hover {
    color: var(--primary-cyan-dark); /* Darker cyan on hover */
    text-decoration: underline; /* Add underline on hover for clarity */
}

a.fw-bold { /* For the "Sign Up" link */
    font-weight: 600 !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 575px) {
    .card {
        padding: 1.5rem; /* Reduce card padding on small screens */
        margin: 0 0.75rem; /* Add slight margin to prevent touching edges */
    }

    .card-title {
        font-size: 1.8rem;
    }

    .card-body > p.text-center.text-muted {
        font-size: 0.95rem;
    }
}


/* ===== LOGIN_PAGE.CSS (Alerts Section Added) ===== */

/* ... (Your existing light theme CSS from before) ... */

/* Add this new section for alerts */

/* ===== ALERT MESSAGES ===== */

.alert {

}

.alert-container {
    /* To center the d-inline-block alert within its flex parent */
    width: 100%;
    display: flex;
    justify-content: center;
    color: red !important;
    /* You had mb-4 in HTML, keeping it here for clarity */
    /* margin-bottom: 1.5rem; */
}

.login-alert {
    /* Default alert styles for the login page */
    max-width: 450px; /* Match the max-width of your card for alignment */
    width: 100%; /* Ensure it spans the max-width */
    border-radius: var(--border-radius-md); /* Consistent with other elements */
    padding: 0.8rem 1.25rem; /* Adjusted padding */
    font-size: 0.95rem;
    font-weight: 600; /* Ensure bold text */
    text-align: center; /* Center the text inside the alert */
    border: none; /* Remove default Bootstrap border */
    box-shadow: var(--shadow-light); /* Apply a subtle shadow */
}


/* Responsive adjustments for alerts */
@media (max-width: 575px) {
    .login-alert {
        margin: 0 0.75rem; /* Match card's margin */
        padding: 0.7rem 1rem; /* Slightly less padding on small screens */
    }
}