/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Updated background to resemble the target image */
    background: linear-gradient(160deg, #2980b9 0%, #6dd5fa 50%, #ffffff 100%);
    padding: 20px;
    color: white; /* Default text color for better contrast on new bg */
}

h1 {
    /* Adjusted h1 for a more subtle look, or consider replacing with an icon */
    color: #ffffff;
    margin-bottom: 40px; /* Increased margin */
    font-size: 2.2rem; /* Slightly smaller */
    font-weight: 500;
    text-align: center;
}

form {
    background: transparent; /* Make form background transparent */
    padding: 20px; /* Reduced padding for mobile first */
    border-radius: 10px; /* Keep some rounding for the overall form area if needed */
    box-shadow: none; /* Remove shadow */
    width: 100%;
    max-width: 360px; /* Max width for desktop, mobile will be 100% */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Add space between form elements */
}

label { /* Labels are hidden, but keeping for accessibility if they were visible */
    display: block;
    margin-bottom: 5px; /* Reduced margin */
    color: #f0f0f0; /* Lighter color for labels if they were visible */
    font-size: 0.9rem;
    font-weight: 500;
}

input {
    width: 100%;
    padding: 15px; /* Increased padding */
    margin-top: 0; /* Remove top margin as gap is used in form */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Light border */
    background-color: rgba(255, 255, 255, 0.2); /* Slightly transparent background */
    border-radius: 25px; /* More rounded corners */
    font-size: 1rem;
    color: #333333; /* Darker text color for input on desktop */
    transition: border-color 0.3s ease; /* Only transition border-color */
}

input::placeholder { /* Style placeholder text */
    color: #777777; /* Darker placeholder for desktop */
}

input:focus {
    outline: none;
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.3);
}

button {
    width: 100%;
    padding: 15px;
    background: #007bff; /* Blue similar to target */
    color: white;
    border: none;
    border-radius: 25px; /* More rounded corners */
    font-size: 1.1rem; /* Slightly larger font */
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px; /* Add some margin above the button */
}

button:hover {
    background: #0056b3; /* Darker blue on hover */
}

p {
    margin-top: 25px; /* Increased margin */
    text-align: center;
    color: #4a5568; /* Darker greyish-blue for better contrast on light desktop background */
}

a {
    color: #2c5282; /* Darker blue for links on desktop */
    text-decoration: none;
    font-weight: 600; /* Bolder link */
    transition: color 0.3s ease;
}

a:hover {
    color: #1a365d; /* Even darker blue on hover for desktop */
}

/* Responsive design adjustments */
#text-logo {
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    width: 300px;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #f0f0f0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (max-width: 480px) {
    body {
        padding: 0;
        justify-content: center; /* Center content vertically */
        background: linear-gradient(160deg, #3a7bd5 0%, #3a6073 100%); /* Adjusted gradient */
        display: flex; /* Ensure flex properties apply */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
        min-height: 100vh; /* Full viewport height */
        padding-top: 8vh; /* Increased padding at the top of the body for logo */
    }

    #text-logo {
        font-size: 2.5rem; /* Adjust font size for mobile */
        margin-bottom: 20px; /* Space between text logo and title */
    }

    h1 { /* "Login" title */
        font-size: 1.6rem; /* Slightly smaller title to give more prominence to logo */
        font-weight: 400; /* Lighter font weight */
        color: rgba(255, 255, 255, 0.9);
        margin-top: 0; /* Remove top margin as logo is above */
        margin-bottom: 30px; /* Space below title */
    }

    form {
        padding: 0 20px; /* Remove vertical padding, keep horizontal */
        width: 85%; /* Slightly narrower form */
        max-width: 320px; /* Max width for very small screens */
        background-color: transparent; /* No separate form background */
        border-radius: 0; /* No border radius for the form container itself */
        box-shadow: none; /* Ensure no shadow on the form container */
        display: flex;
        flex-direction: column;
        gap: 18px; /* Space between form elements */
    }

    input {
        padding: 18px 20px; /* Comfortable padding */
        border-radius: 30px; /* Pill shape */
        background-color: rgba(255, 255, 255, 0.9); /* More opaque, very light background */
        border: 1px solid rgba(0, 0, 0, 0.1); /* Subtle border */
        font-size: 1rem;
        color: #333; /* Darker text color for input */
    }

    input::placeholder {
        color: #777; /* Darker placeholder text */
    }
    
    input:focus {
        background-color: #ffffff; /* Solid white on focus */
        border-color: #3a7bd5; /* Accent color border on focus */
        box-shadow: 0 0 0 2px rgba(58, 123, 213, 0.3); /* Subtle focus ring */
    }

    button {
        padding: 18px;
        border-radius: 30px; /* Pill shape */
        font-size: 1.1rem;
        font-weight: 500;
        background-color: #007bff; /* Keep this blue or adjust if needed */
        margin-top: 10px; /* Add some space above the button */
    }

    button:hover {
        background-color: #0056b3;
    }

    p { /* "Don't have an account?" text */
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.8); /* Slightly more transparent white */
        margin-top: 25px;
    }

    a {
        color: #e0f2f7; /* Very light blue, almost white */
        font-weight: 500;
    }

    a:hover {
        color: #ffffff;
    }
}

/* Loading Indicator Animation */
#loading-indicator .dot {
    opacity: 0;
    animation: blink 1.4s infinite;
}

#loading-indicator .dot:nth-child(1) {
    animation-delay: 0s;
}

#loading-indicator .dot:nth-child(2) {
    animation-delay: 0.2s;
}

#loading-indicator .dot:nth-child(3) {
    animation-delay: 0.4s;
}