/* Parsley errors styling */
.parsley-errors-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: red; /* Red text for errors */
    font-size: 14px;
}

.parsley-errors-list li {
    margin-top: 5px;
}

/* Invalid field styling */
.parsley-error {
    border: 2px solid red !important; /* Red border for error */
    animation: shake 0.3s ease-in-out; /* Add shake effect */
    position: relative;
}

/* Add error icon inside the input field */
.parsley-error::after {
    content: '\26A0'; /* Unicode for warning icon âš  */
    font-size: 16px;
    color: red;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Icon won't interfere with input interaction */
}

/* Valid field styling */
.parslbbbey-success {
    border: 2px solid green !important; /* Green border for success */
    position: relative;
} 



/* Add success icon inside the input field */
.parscccleyc-vvvv::after {
    content: "\f00c"; /* Unicode for checkmark ✔ */
    font-size: 16px; 
    border-color: var(--bs-success);
    position: absolute;
    right: 10px;
    font-weight:bold;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
/* Override for radio inputs */
input[type="radio"].parsley-success {
    border: none !important;
    position: static !important;
}
form input[type="radio"].parsley-success {
    border: 0 none !important;
    position: static !important;
}
.parsley-success input[type="radio"] {
    border: 0 none !important;
    position: static !important;
}
/* Disable background changes */
input.parsley-success,
select.parsley-success,
textarea.parsley-success,
input.parsley-error,
select.parsley-error,
textarea.parsley-error {
    background-color: transparent !important; /* No background color change */
    color: inherit; /* Use default text color */
}

/* Optional: Smooth transitions for border colors */
input,
select,
textarea {
    transition: border-color 0.3s ease-in-out;
}

/* Shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-4px); }
}

/* Additional: Style for Parsley tooltip error messages */
.parsley-errors-list.filled {
    opacity: 1;
}

.parsley-tooltip {
    background-color: red;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    position: absolute;
    z-index: 10;
    top: 100%;
    left: 0;
    transform: translateY(5px);
    display: none;
}