/* Scoped CSS using a unique container to prevent conflicts */
        #custom-search-container * {
            box-sizing: border-box;
        }

        #custom-search-container {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: lightgray;
        }

        #custom-search-container #searchInput {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 4px solid darkblue;
            border-radius: 25px;
            font-size: 16px;
        }

        /* Search result styling with high specificity */
        #custom-search-container .search-result {
            background-color: #f4f4f4;
            border-radius: 25px;
            padding: 15px;
            margin-bottom: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        /* Hover effects */
        #custom-search-container .search-result:hover {
            background-color: #00008B;  /* Dark Blue background on hover */
            transform: scale(1.02);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        /* Text styling */
        #custom-search-container .search-result h3 {
            color: #00008B;  /* Dark Blue text */
            margin-top: 0;
            transition: color 0.3s ease;
        }

        #custom-search-container .search-result p {
            color: #333;  /* Default dark gray text */
            margin-bottom: 0;
            transition: color 0.3s ease;
        }

        #custom-search-container .search-result a {
            color: #00008B;  /* Dark Blue link color */
            text-decoration: none;
            transition: color 0.3s ease;
        }

        /* Hover text color changes */
        #custom-search-container .search-result:hover h3,
        #custom-search-container .search-result:hover a {
            color: lightskyblue;  /* Light Sky Blue text on hover */
        }

        #custom-search-container .search-result:hover p {
            color: lightskyblue;  /* Light Sky Blue text on hover */
        }

        /* Hide keywords */
        #custom-search-container .search-result small {
            display: none;
        }
        #custom-search-container #searchInput:focus {
    background-color: #00008B;  /* Dark blue background */
    color: lightskyblue;  /* Light sky blue text */
    outline: none;  /* Removes default focus outline */
    border-color: lightskyblue;  /* Optional: change border color on focus */
    box-shadow: 0 0 10px rgba(135, 206, 250, 0.5);  /* Optional: adds a soft glow effect */
}

#custom-search-container #searchInput::placeholder {
    color: rgba(135, 206, 250, 0.7);  /* Light sky blue placeholder text */
    transition: color 0.3s ease;
}

#custom-search-container #searchInput:focus::placeholder {
    color: rgba(135, 206, 250, 0.3);  /* Faded placeholder when input is focused */
}