/* Container */
.form-custom-floating {
    position: relative;
    font-family: inherit;
}

    /* Controls */
    .form-custom-floating > .form-control,
    .form-custom-floating > .form-select {
        width: 100%;
        box-sizing: border-box;
        padding: 1.1rem 0.75rem 0.35rem 0.75rem;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        background: #fff;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }

    /* Select specific (with chevron) */
    .form-custom-floating > .form-select {
        padding-right: 2.75rem; /* space for chevron */
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='purple'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>");
        background-repeat: no-repeat;
        background-position: right 0.9rem center;
        background-size: 18px 18px;
    }

    /* Label */
    .form-custom-floating > label {
        position: absolute;
        left: 0.75rem;
        top: 0.9rem;
        transform-origin: left top;
        font-size: 1rem;
        color: #666;
        background: #fff;
        padding: 0 0.25rem;
        pointer-events: none;
        transition: transform 0.18s ease, color 0.18s ease, font-size 0.18s ease, top 0.18s ease;
        z-index: 1;
    }

    /* Focus styles */
    .form-custom-floating > .form-control:focus,
    .form-custom-floating > .form-select:focus {
        outline: none;
        border-color: #7c3aed;
        box-shadow: 0 0 0 3px rgba(124,58,237,0.08);
    }

        /* --- FLOAT TRIGGERS --- */

        /* On focus */
        .form-custom-floating > .form-control:focus ~ label,
        .form-custom-floating > .form-select:focus ~ label {
            transform: translateY(-1.0rem) scale(0.88);
            top: 0.50rem;
            font-weight: 500;
            color: #7c3aed;
            border-radius: 6px;
        }

    /* On input value (via JS .has-value OR placeholder OR valid) */
    .form-custom-floating > .form-control.has-value ~ label,
    .form-custom-floating > .form-select.has-value ~ label,
    .form-custom-floating > .form-control:not(:placeholder-shown) ~ label,
    .form-custom-floating > input[type="number"].form-control:valid ~ label {
        transform: translateY(-1.0rem) scale(0.88);
        top: 0.50rem;
        font-weight: 500;
        color: #7c3aed;
        border-radius: 6px;
    }

    /* Autofill tweak */
    .form-custom-floating > .form-control:-webkit-autofill ~ label {
        transform: translateY(-1.0rem) scale(0.88);
        top: 0.50rem;
        color: #7c3aed;
    }

    /* Small variant */
    .form-custom-floating.small > .form-control,
    .form-custom-floating.small > .form-select {
        padding: 0.9rem 0.6rem 0.25rem 0.6rem;
    }

    .form-custom-floating.small > label {
        left: 0.6rem;
    }

    /* Readonly state */
    .form-custom-floating > .form-control[readonly],
    .form-custom-floating > .form-select[readonly] {
        background-color: #f9f5ff83; /* very light purple */
        cursor: not-allowed;
        opacity: 1; /* keep text readable */
        border-color: #f9f5ffff;
       
    }

        /* Optional: keep floating label visible and styled */
        .form-custom-floating > .form-control[readonly] ~ label,
        .form-custom-floating > .form-select[readonly] ~ label {
            color: #7c3aed; /* same purple as focus */
            background-color: #f9f5ff83;
            font-weight: 500;
            border-radius: 6px;
            
        }