/* Custom properties and animations for the Login UI */
body {
    background-color: #f8f7f4;
    overflow-x: hidden;
}

/* Glassmorphism for the branding overlay */
.glass-overlay {
    background: rgba(26, 30, 35, 0.4); /* Dark translucent */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Floating Label Logic */
.floating-input {
    position: relative;
    transition: all 0.3s ease;
}

    .floating-input input {
        width: 100%;
        padding: 1.5rem 1.25rem 0.5rem 1.25rem;
        background-color: transparent;
        border: none;
        outline: none;
    }

    .floating-input label {
        position: absolute;
        top: 50%;
        right: 1.25rem;
        transform: translateY(-50%);
        color: #9ca3af; /* Tailwind gray-400 */
        font-weight: 700;
        transition: all 0.2s ease-out;
        pointer-events: none;
    }

    /* Trigger floating effect on focus or when input has value */
    .floating-input input:focus ~ label,
    .floating-input input:not(:placeholder-shown) ~ label {
        transform: translateY(-130%) scale(0.85);
        color: #7a8c45; /* Brand Olive */
        right: 1rem;
    }

/* Custom Checkbox Animation */
.custom-checkbox input:checked ~ div {
    background-color: #7a8c45;
    border-color: #7a8c45;
}

    .custom-checkbox input:checked ~ div svg {
        opacity: 1;
        transform: scale(1);
    }