.input-line-error,
.input-line-focused {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.input-text:focus ~ .input-line-focused,
.input-date:focus ~ .input-line-focused,
.input-select:focus ~ .input-line-focused {
    pointer-events: none;
    border-bottom: 4px solid #233840;
    border-radius: 0.375rem;
}

/* You can disable this line error when focused when encountering issues in validation  */
.input-text:not(:placeholder-shown) ~ .input-line-error,
.input-text:focus ~ .input-line-error,
.input-date:focus ~ .input-line-error {
    pointer-events: none;
    border-bottom: 2px solid #be353a;
    border-radius: 0.375rem;
}

/* YOu can use this instead */
/* .input-line-error {
    pointer-events: none;
    border-bottom: 1px solid #be353a;
    border-radius: 0.375;
} */

/* Makes the label go up when field is focused or has value */
.input-text:focus ~ .input-text-label,
.input-text:not(:placeholder-shown) ~ .input-text-label,
.input-date:focus ~ .input-date-label,
.input-date:not(:placeholder-shown) ~ .input-date-label,
.input-select:focus ~ .input-select-label,
.input-select:valid ~ .input-select-label {
    font-size: 12px;
    top: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}


.input-tel-label--shrink {
    top: 0 !important;
    font-size: 0.675rem !important;
    transform: translate(0, 0) !important;
}

.input-text,
.input-date,
.input-select {
    padding: 1.125rem 2.75rem 1rem 1rem;
}

.input-text-label,
.input-date-label,
.input-select-label {
    padding: 0 15px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%); /* Vendor prefix for iOS */
    transition: all 0.25s ease-in-out;
}

.input-tel-label {
    position: absolute;
    top: 50%;
    transform: translate(0, -55%);
    left: 90px;
    transition: all 0.25s ease-in-out;
    font-size: 1rem;
    pointer-events: none;
}

.input-xmark-error {
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translate(-30%, -50%);
}

.input-xmark-svg {
    transition: opacity 0.25s ease-in-out;
}

/* Date field */

.label--shrink {
    font-size: 12px;
    top: 10px;
    display: inline-block;
}

.input-date {
    position: relative;
    display: block;
}

.input-date::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%; /* Expand to cover the whole field */
    height: 100%; /* Expand to cover the whole field */
    cursor: pointer; /* Make it look clickable */
    background: transparent; /* Ensure background is transparent */
}

/* Ensure the actual icon is visible */
.input-date::-webkit-calendar-picker-indicator::after {
    content: "";
    position: absolute;
    top: 0;
    right: 10px; /* Adjust based on the padding */
    bottom: 0;
    width: 30px; /* Adjust to the size of the icon */
    background: transparent; /* Ensure background is transparent */
    pointer-events: none; /* Allow click-through to the parent element */
}

.datepicker-cell.selected,
.datepicker-cell.selected:hover {
    background-color: #b11116 !important;
}

/* Additional styles to make sure the input field looks consistent */
.input-date--transparent {
    color: transparent; /* Hide the text cursor */
}

.input-date:focus {
    color: black; /* Show the text cursor when focused */
}

/* Select Field */

select {
    background-image: none !important;
}