/* File: wwwroot/css/auth-layout.css */

/* ========= Root layout for login/resend/register pages ========= */
body.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

    /* Center header block (logo, headings, error messages) */
    body.login-page .login-wrapper .text-center {
        text-align: center;
    }

    body.login-page .login-wrapper .text-danger {
        text-align: center;
    }

    /* Form layout: vertical spacing and right-align login button */
    body.login-page .login-wrapper form {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

        body.login-page .login-wrapper form .btn {
            align-self: flex-end;
            width: auto !important;
            display: inline-flex;
        }

    /* Align “Forgot password?” to left and “Resend confirmation” to right */
    body.login-page .login-wrapper .mt-3.d-flex {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center;
    }

    /* Center bottom block: “Don’t have an account” + Terms link */
    body.login-page .login-wrapper .mt-4 {
        text-align: center;
    }

/* Login wrapper styling */
.login-wrapper {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    width: 400px;
}

    .login-wrapper h4 {
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .login-wrapper h5,
    .login-wrapper h6 {
        color: #666;
        margin-bottom: 0.5rem;
    }

    .login-wrapper a {
        color: #1d67a7;
        text-decoration: none;
    }

        .login-wrapper a:hover {
            text-decoration: underline;
        }

    .login-wrapper .btn {
        background-color: #117542;
        color: #fff;
        border: none;
        transition: background-color 0.3s ease;
    }

        .login-wrapper .btn:hover {
            background-color: #0e5c37;
        }

/* Terms wrapper style (if used) */
.terms-wrapper {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 2rem 3rem;
    max-width: 750px;
    margin: 2rem auto;
    box-sizing: border-box;
}

    .terms-wrapper h1,
    .terms-wrapper h2,
    .terms-wrapper h3 {
        color: #1d67a7;
        margin-top: 1.5rem;
    }

    .terms-wrapper p,
    .terms-wrapper li {
        color: #333;
        line-height: 1.6;
    }

    .terms-wrapper ul {
        padding-left: 1.25rem;
    }

/* Resend confirmation wrapper styling */
.resend-wrapper {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    width: 100%;
    max-width: 400px;
}

    .resend-wrapper h3,
    .resend-wrapper h5 {
        font-weight: 600;
        color: #1d67a7;
        margin-bottom: 0.5rem;
    }

    .resend-wrapper p,
    .resend-wrapper div[style] {
        color: #555;
        font-size: 0.9rem;
    }

    .resend-wrapper .btn {
        background-color: #213159;
        color: #fff;
        border: none;
        transition: background-color 0.3s ease;
    }

        .resend-wrapper .btn:hover {
            background-color: #1a2746;
        }

/* Register wrapper styling */
.register-wrapper {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    margin: auto;
}

    .register-wrapper h3 {
        color: #1d67a7;
        margin-bottom: 0.5rem;
    }

    .register-wrapper p,
    .register-wrapper label,
    .register-wrapper div[style] {
        color: #555;
        font-size: 0.9rem;
    }

    .register-wrapper .btn {
        background-color: #213159;
        color: #fff;
        border: none;
        transition: background-color 0.3s ease;
    }

        .register-wrapper .btn:hover {
            background-color: #1a2746;
        }