/* === Floating Input Group === */
.floating-group {
    position: relative;
    margin-bottom: 15px;
}

    .floating-group input {
        width: 100%;
        padding: 15px;
        font-size: 16px;
        border-radius: 4px;
        border: 1px solid #707A6C;
        background: transparent;
        outline: none;
        transition: border-color 0.3s;
        position: relative;
        z-index: 1;
        vertical-align: middle;
    }

        .floating-group input::placeholder {
            color: #40493D;
        }

        /*.floating-group input:focus {
            border-color: #4CAF50;
        }*/

        .floating-group input.is-invalid {
            border-color: #C62828 !important;
            border-width: 3px;
        }

    .floating-group label {
        position: absolute;
        top: -0.5rem;
        left: 0.6rem;
        font-size: 0.75rem;
        color: #40493D;
        background-color: #f9f9f9;
        padding: 0 0.25rem;
        transition: 0.2s ease all;
        pointer-events: none;
        z-index: 2;
    }

    /*.floating-group input:focus + label,
    .floating-group input:not(:placeholder-shown) + label {
        top: -0.5rem;
        left: 0.6rem;
        font-size: 0.75rem;
        color: #4CAF50;
    }*/

    .floating-group input.is-invalid ~ label {
        color: #C62828;
    }

    /* === Icons Inside Input === */
    .floating-group .icon-right {
        position: absolute;
        top: 1.375rem; /* consistent top padding for vertical alignment */
        font-size: 1.2rem;
        z-index: 3;
        line-height: 1;
        display: flex;
        align-items: center;
        transform: none; /* avoid vertical shift due to error text */
    }

    /* Error icon (left-most) */
    .floating-group .error-icon {
        right: 4.25rem;
        color: #C62828;
        display: none;
    }

    .floating-group input.is-invalid ~ .error-icon {
        display: flex;
    }

    /* Eye icon (middle) */
    .floating-group .eye-toggle {
        right: 10px;
        color: #555;
        cursor: pointer;
    }

    /* Clear icon (right-most) */
    .floating-group .clear-icon {
        right: 0.75rem;
        color: #888;
        cursor: pointer;
    }

/* === Validation Error Text === */
.text-danger {
    font-size: 0.85rem;
    color: #C62828;
    margin-top: 0.25rem;
    display: block;
    padding-left: 15px;
}

/* Password hint rules */
.password-hint {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}

    .password-hint li {
        font-size: 12px;
        color: #707A6C;
        line-height: 12px;
        letter-spacing: 0.4px;
        display: flex;
        align-items: center;
        margin-bottom: 0.25rem;
    }

        .password-hint li i {
            color: #aaa; /* gray default */
            margin-right: 0.5rem;
        }

        .password-hint li.text-success {
            color: #2e7d32; /* green text */
        }

            .password-hint li.text-success i {
                color: #2e7d32; /* green checkmark */
            }

/* === Login Button === */
.btn.login-btn {
    min-width: 328px;
    width: 100%;
    border-radius: 2rem;
    background: #4fa753;
    color: white;
    padding: 0.6rem 0;
    font-weight: 600;
    font-size: 1rem;
    transition: background 0.3s ease, color 0.3s ease;
    cursor: pointer;
}

    .btn.login-btn:disabled {
        background-color: #dddddd !important; /* light gray */
        color: #929492 !important; /* muted text */
        cursor: not-allowed;
        border: none;
        opacity: 1 !important;
    }

/* === Forgot Password & Footer === */
.forgot-link {
    text-align: right;
    font-size: 0.9rem;
}

    .forgot-link a {
        color: #388E3C;
        font-weight: 500;
        text-decoration: none;
    }

        .forgot-link a:hover {
            text-decoration: underline;
        }

.footer-text {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.9rem;
    color: #555;
}