.uppercase {
    text-transform: uppercase;
}

.floating-label-group {
    position: relative;
    margin-bottom: 1.5rem;
}

    .floating-label-group label {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #686e76;
        background: white;
        padding: 0 0.25rem;
        pointer-events: none;
        font-size: 1rem;
        transition: 0.2s ease all;
    }

    .floating-label-group.is-filled label {
        top: 0.3rem;
        font-size: 0.75rem;
        color: #686e76;
    }

.floating-label-group {
    position: relative;
    margin-bottom: 1.5rem;
}

    .floating-label-group input,
    .floating-label-group textarea,
    .floating-label-group select {
        width: 100%;
        font-size: 0.75rem;
        padding: 0.75rem 0.75rem 0.25rem 0.75rem;
        border: 2px solid #d2d8df; /* Always visible border */
        border-radius: 6px;
        outline: none;
        background-color: white;
        box-sizing: border-box;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    .floating-label-group label {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #686e76;
        background: white;
        padding: 0 0.25rem;
        pointer-events: none;
        font-size: 1rem;
        transition: 0.2s ease all;
    }

    .floating-label-group input:focus + label,
    .floating-label-group input:not(:placeholder-shown) + label,
    .floating-label-group textarea:focus + label,
    .floating-label-group textarea:not(:placeholder-shown) + label {
        top: 0.3rem;
        font-size: 0.75rem;
        color: #686e76;
    }

    /* For select dropdowns — label float on class */
    .floating-label-group.filled label {
        top: 0.3rem;
        font-size: 0.75rem;
        color: #686e76;
    }

/* Optional: Error border */
.input-error {
    border: 2px solid #c62929 !important;
}