/* Neo-brutalism Search Input Styling */

/* Desktop search input */
.search-container {
    position: relative;
    margin-left: 10px;
}

.search-container input[type="search"] {
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    padding: 10px 15px !important;
    font-size: 1rem !important;
    background-color: #fff !important;
    color: #000 !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.7) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    width: 200px !important;
}

.search-container input[type="search"]:focus {
    outline: none !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.7) !important;
    transform: translate(-2px, -2px) !important;
    border-color: #FF6B8B !important;
}

.search-container input[type="search"]::placeholder {
    color: #888 !important;
}

/* Add heart icon to search input */
.search-container::before {
    content: "♥";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #FF6B8B;
    font-size: 16px;
    z-index: 10;
    pointer-events: none;
}

/* Mobile search input */
.mobile-search {
    width: 100%;
    margin: 10px 0;
    position: relative;
    z-index: 1000;
}

.mobile-search input[type="search"] {
    width: 100% !important;
    border: 3px solid #000 !important;
    border-radius: 0 !important;
    padding: 10px 15px !important;
    font-size: 1rem !important;
    background-color: #fff !important;
    color: #000 !important;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.7) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative;
    z-index: 1000;
}

.mobile-search input[type="search"]:focus {
    outline: none !important;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.7) !important;
    transform: translate(-2px, -2px) !important;
    border-color: #FF6B8B !important;
}

/* Add some space below the mobile search input */
.mobile-search-container {
    margin-bottom: 15px;
    position: relative;
    z-index: 1000;
}

/* Add heart icon to mobile search */
.mobile-search::before {
    content: "♥";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #FF6B8B;
    font-size: 16px;
    z-index: 10;
    pointer-events: none;
}

/* Dark mode styles */
.dark .search-container input[type="search"],
.dark .mobile-search input[type="search"] {
    border: 3px solid rgba(255, 255, 255, 0.7) !important;
    background-color: var(--background-color-dark) !important;
    color: var(--text-color) !important;
    box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.15) !important;
}

.dark .search-container input[type="search"]:focus,
.dark .mobile-search input[type="search"]:focus {
    box-shadow: 6px 6px 0 rgba(255, 255, 255, 0.15) !important;
    border-color: #FF6B8B !important;
}

.dark .search-container::before {
    color: #FF6B8B;
}

/* Add cute background pattern to search inputs on focus */
.search-container input[type="search"]:focus,
.mobile-search input[type="search"]:focus {
    background-image:
        radial-gradient(#FFD1DC 3px, transparent 3px),
        radial-gradient(#FFD1DC 3px, transparent 3px) !important;
    background-size: 30px 30px !important;
    background-position: 0 0, 15px 15px !important;
}

.dark .search-container input[type="search"]:focus,
.dark .mobile-search input[type="search"]:focus {
    background-image:
        radial-gradient(rgba(255, 209, 220, 0.2) 3px, transparent 3px),
        radial-gradient(rgba(255, 209, 220, 0.2) 3px, transparent 3px) !important;
}