/* Style for the label when it acts as a placeholder */
.en__field--text .en__field__label,
.en__field--number .en__field__label,
.en__field--telephone .en__field__label {
    position: absolute;
    top: 35%; /* Default position */
    left: 10px;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    pointer-events: none;
    color: #999;
}

/* Select field labels start in active position with NO transition */
.en__field--select .en__field__label {
    position: absolute;
    top: 0; /* Always at top for select fields */
    left: 10px;
    font-size: 12px;
    color: #333;
    background: white;
    width: fit-content;
    padding: 0 5px;
    transform: translateY(-50%);
    pointer-events: none;
    /* NO transition for select fields */
}

/* Style for the label when the input is focused or has content */
.en__field--text .en__field__label.active,
.en__field--number .en__field__label.active,
.en__field--telephone .en__field__label.active {
    top: 0; /* Move label to the top when active */
    left: 10px;
    font-size: 12px;
    color: #333;
    background: white;
    width: fit-content;
    padding: 0 5px;
}

/* Select field labels are always active - no change needed */
.en__field--select .en__field__label.active {
    /* Already styled above - no additional changes */
}

/* Ensure the input field has padding to avoid overlapping with the label */
.en__field--text input,
.en__field--number input,
.en__field--telephone input {
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 10px;
    font-size: 16px;
}

/* Select fields have different padding since label is always at top */
.en__field--select select {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    font-size: 16px;
}

/* Container for the input/select and label to position them correctly */
.en__field--text,
.en__field--number,
.en__field--telephone,
.en__field--select {
    position: relative;
}

/* Style for the error message */
.en__field__error {
    color: #d9534f; /* Red color for errors */
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 10px; /* Add space between error and input */
}

/* Specific select field padding overrides */
select#en__field_supporter_region, 
select#en__field_transaction_infreg, 
select#en__field_supporter_questions_2205749, 
select#en__field_transaction_trbopts, 
select#en__field_transaction_othamt1 {
    padding-top: 10px !important;
}

/* Hide labels when hide-label class is present */
.hide-label .en__field__label:not(.en__field__label--item) {
    display: none !important;
}