/* Autocomplete Suggestions Styling */
.autocomplete-suggestions {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    background-color: #fff;
    position: absolute;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 0.375rem 0.375rem; /* Rounded bottom corners */
    display: none; /* Hidden by default */
}

.autocomplete-suggestions.active {
    display: block; /* Shown when active */
}

.autocomplete-suggestions li {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.autocomplete-suggestions li:last-child {
    border-bottom: none;
}

.autocomplete-suggestions li:hover {
    background-color: #f0f8ff; /* Light blue on hover */
    color: #2563eb; /* Darker blue text on hover */
}

/* Tooltip Styling */
.input-error-tooltip {
    position: absolute;
    top: 100%; /* Position below the input */
    left: 0;
    margin-top: 5px; /* Spacing from input */
    padding: 8px 12px;
    background-color: #ef4444; /* Red background */
    color: white;
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.875rem; /* text-sm */
    white-space: nowrap; /* Prevent text wrapping */
    z-index: 10; /* Ensure it's above other elements */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none; /* Allows clicks/hovers on elements behind it */
}

/* Show tooltip when input has error-border class and user hovers */
/* We'll manage visibility via JS to ensure it appears on validation failure
   and disappears when fixed, but keeping :hover for immediate feedback. */
.input-error-tooltip.show {
    opacity: 1;
    visibility: visible;
}

/* Base style for inputs (already there, but good to emphasize) */
.shadow.appearance-none.border.rounded.w-full.py-3.px-4.text-gray-700.leading-tight.focus\:outline-none.focus\:ring-2.focus\:ring-blue-500.focus\:border-transparent {
    transition: border-color 0.3s ease; /* Smooth transition for border color */
}

/* Error border for inputs */
.border-red-500 {
    border-color: #ef4444 !important; /* Tailwind's red-500 */
}