/* General styles for the Identity pages to match application theme */
body {
    background-color: #f6f6f6; /* Light background */
    font-family: 'Roboto', sans-serif;
}



.auth-card {
    background-color: #ffffff;
    padding: 50px 60px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid #ddd;
    max-width: 650px;
    width: 90%;
    text-align: center;
}

/* Adjust vertical alignment slightly higher */
.login-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Changed from center */
    padding-top: 80px;
    min-height: calc(100vh - 120px);
}

/* Responsive breakpoint (optional) */
@media (max-width: 768px) {
    .auth-card {
        max-width: 90%;
        padding: 30px 20px;
    }
}






.auth-card h1,
.auth-card h2,
.auth-card h4 {
    font-family: 'Playfair Display', serif;
    color: #333;
    margin-bottom: 25px;
}

.auth-card h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: #5f6368;
    margin-bottom: 20px;
}




/*.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 80px);*/ /* Adjust for header height */
    /*padding: 40px 0;*/ /* Add vertical padding */
/*}

.auth-card {
    background-color: #ffffff;*/ /* White background for the card */
    /*padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);*/ /* Subtle shadow */
    /*border: 1px solid #ddd;*/ /* Light border */
    /*max-width: 500px;*/ /* Max width for the card */
    /*width: 100%;
    text-align: center;*/ /* Center content within the card */
/*}

    .auth-card h1,
    .auth-card h2,
    .auth-card h4 {
        font-family: 'Playfair Display', serif;
        color: #333;*/ /* Dark text for headings */
        /*margin-bottom: 25px;
    }

    .auth-card h4 {


        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        color: #5f6368;
        margin-bottom: 20px;
    }*/

.fade-in {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInSlideUp 0.6s ease-out forwards;
}

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



.fade-in-scale {
    opacity: 0;
    transform: scale(0.95);
    animation: fadeInScale 0.6s ease-out forwards;
}

@keyframes fadeInScale {
    to {
        opacity: 1;
        transform: scale(1);
    }
}




.form-floating > .form-control,
.form-floating > .form-select {
    background-color: #f8f9fa;
    color: #333;
    border: 1px solid #ced4da;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    padding: 1rem 0.75rem; /* Adjust padding for better look with floating labels */
}

.form-floating > label {
    color: #6c757d; /* Lighter label color */
    padding: 1rem 0.75rem; /* Match input padding */
}

.form-control:focus,
.form-select:focus {
    border-color: #1a73e8; /* Primary blue focus ring */
    box-shadow: 0 0 0 0.25rem rgba(26, 115, 232, 0.25);
}

/* Checkbox styling */
.form-check-input {
    border: 1px solid #ced4da;
}

    .form-check-input:checked {
        background-color: #1a73e8;
        border-color: #1a73e8;
    }

.form-check-label {
    color: #333;
    font-weight: 400; /* Regular font weight for checkbox label */
    padding-left: 5px; /* Small space between checkbox and label */
}

/* Buttons */
.btn-primary {
    background-color: #1a73e8; /* Primary blue */
    border-color: #1a73e8;
    color: white;
    font-weight: 500;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

    .btn-primary:hover {
        background-color: #145cb7;
        border-color: #145cb7;
    }

.btn-outline-secondary {
    color: #6c757d;
    border-color: #ced4da;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

    .btn-outline-secondary:hover {
        background-color: #f0f0f0;
        color: #495057;
    }

.text-danger {
    color: #ea4335 !important; /* Consistent red for errors */
    font-size: 0.875em; /* Smaller error text */
    margin-top: 5px;
    display: block; /* Ensure it takes full width for spacing */
}

.link-styled {
    color: #1a73e8; /* Blue for links */
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

    .link-styled:hover {
        color: #145cb7;
        text-decoration: underline;
    }

.provider-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-weight: 500;
    text-align: center;
    background-color: #f2f2f2; /* Light background for provider buttons */
    border: 1px solid #e0e0e0;
    color: #333;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

    .provider-button:hover {
        background-color: #e6e6e6;
        border-color: #d0d0d0;
    }

.provider-icon {
    margin-right: 10px;
    font-size: 1.2em;
}

/* Specific provider button colors (optional, for branding) */
.btn-google {
    background-color: #4285f4;
    color: white;
    border-color: #4285f4;
}

    .btn-google:hover {
        background-color: #3367d6;
        border-color: #3367d6;
    }

.btn-microsoft {
    background-color: #2f2f2f;
    color: white;
    border-color: #2f2f2f;
}

    .btn-microsoft:hover {
        background-color: #1e1e1e;
        border-color: #1e1e1e;
    }

/* Add these styles to your identity-theme.css */

/* Custom Success Alert */
.alert-success-custom {
    background-color: #e6f7ed; /* A lighter, softer green background */
    color: #1f7a4a; /* A darker, readable green text */
    border-color: #b3e0c4; /* A matching border color */
}

/* Custom Danger Alert */
.alert-danger-custom {
    background-color: #fcebeb; /* A lighter, softer red background */
    color: #c93327; /* A darker, readable red text */
    border-color: #f7d4d4; /* A matching border color */
}

    /* Ensure the close button is visible on these custom backgrounds */
    .alert-success-custom .btn-close,
    .alert-danger-custom .btn-close {
        /* Bootstrap's default btn-close usually works well here, 
       but if you need to force color, you can: 
       color: #333; 
       opacity: 0.8; */
    }

/* Custom Info Alert */
.alert-info-custom {
    background-color: #e8f0fe; /* A softer, light blue background */
    color: #1a73e8; /* A darker, readable blue text */
    border-color: #cfe2ff; /* A matching border color */
}

/* Custom Warning Alert */
.alert-warning-custom {
    background-color: #fff3cd; /* A softer, light yellow background */
    color: #856404; /* A darker, readable yellow-brown text */
    border-color: #ffeeba; /* A matching border color */
}

    /* Ensure the close button is visible on these custom backgrounds if alert-dismissible is used */
    .alert-info-custom .btn-close,
    .alert-warning-custom .btn-close {
        /* Adjust color if needed, but Bootstrap's default often works */
        /* color: #333; opacity: 0.8; */
    }