/* 
 * Country search autocomplete styling
 * This file provides enhanced styling for the country search autocomplete
 */

/* Input styling */
.country-search-input {
    transition: all 0.3s ease;
}

.country-search-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* Make the datalist dropdown more visible and modern */
.country-search-input::-webkit-calendar-picker-indicator {
    opacity: 0;
}

/* Add some transition effects when focusing on the search */
.destination-search-form .input-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.destination-search-form .input-card:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
}

/* For browsers that support it, style the autocomplete dropdown */
@supports ((-webkit-appearance: none) or (-moz-appearance: none)) {
    /* Modern browsers with support for advanced selectors */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0px 1000px white inset;
        transition: background-color 5000s ease-in-out 0s;
    }
    
    .country-search-input:focus {
        background-image: linear-gradient(to bottom, rgba(var(--bs-primary-rgb), 0.03), rgba(var(--bs-primary-rgb), 0.01));
    }
}

/* Help text for search appears when focused */
.destination-search-form .search-help-text {
    display: none;
    margin-top: 0.25rem;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: var(--bs-gray-600);
    font-size: 0.875rem;
}

.destination-search-form .input-card:focus-within + .search-help-text {
    display: block;
    opacity: 1;
}

/* Highlight effect for popular destinations */
.text-decoration-none.text-primary.fw-bold {
    position: relative;
}

.text-decoration-none.text-primary.fw-bold::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--bs-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.text-decoration-none.text-primary.fw-bold:hover::after {
    transform: scaleX(1);
}