/* Floating label effect for input and textarea */
input:focus + .floating-label,
input:not(:placeholder-shown) + .floating-label,
textarea:focus + .floating-label,
textarea:not(:placeholder-shown) + .floating-label {
    transform: translateY(-30px); /* Move the label up */
    color: blue; /* Indigo color */
    font-size: 0.75rem; /* Make the label smaller */
    background-color: white; /* White background to mask border */
    border-radius: 40%;
    padding: 2px 4px;
}

/* Default position for labels */
.floating-label {
    position: absolute;
    right: 0;
    top: 16px;
    transition: transform 0.3s, font-size 0.3s, color 0.3s;
    pointer-events: none;
    color: gray;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
    input:focus + .floating-label,
    input:not(:placeholder-shown) + .floating-label,
    textarea:focus + .floating-label,
    textarea:not(:placeholder-shown) + .floating-label {
        color: white; /* Adjust color for dark mode */
        background-color: #111827; /* Dark background to match dark mode */
    }

    .floating-label {
        color: #9ca3af; /* Light gray for default label color in dark mode */
    }
}