/* Custom styles for JavaPapo Blog */

/* Make search form more visible and distinctive */
.search_box {
    background-color: #f0f8ff !important; /* Light blue background */
    border: 2px solid #4a90e2 !important; /* Blue border */
    border-radius: 8px !important;
    padding: 8px 12px !important;
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2) !important;
    transition: all 0.3s ease !important;
}

.search_box:hover {
    background-color: #e6f3ff !important;
    border-color: #2b7fd4 !important;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3) !important;
}

.search_box:focus-within {
    background-color: #ffffff !important;
    border-color: #2b7fd4 !important;
    box-shadow: 0 4px 16px rgba(74, 144, 226, 0.4) !important;
}

/* Style the search input itself */
.search_box input[type="search"],
.search_box input[type="text"] {
    background-color: transparent !important;
    font-size: 16px !important;
    color: #333 !important;
}

.search_box input[type="search"]::placeholder,
.search_box input[type="text"]::placeholder {
    color: #5a9fd4 !important;
    opacity: 0.8 !important;
}

/* Style search icon/button if present */
.search_box button,
.search_box .search_button {
    background-color: #4a90e2 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    transition: background-color 0.3s ease !important;
}

.search_box button:hover,
.search_box .search_button:hover {
    background-color: #2b7fd4 !important;
    cursor: pointer !important;
}

/* Dark mode adjustments */
.dark .search_box {
    background-color: #1a2332 !important;
    border-color: #4a90e2 !important;
}

.dark .search_box:hover {
    background-color: #243447 !important;
    border-color: #5aa0e6 !important;
}

.dark .search_box:focus-within {
    background-color: #2a3b4f !important;
    border-color: #5aa0e6 !important;
}

.dark .search_box input[type="search"],
.dark .search_box input[type="text"] {
    color: #e0e0e0 !important;
}

.dark .search_box input[type="search"]::placeholder,
.dark .search_box input[type="text"]::placeholder {
    color: #7cb3e8 !important;
}