.search-card {
    --search-card-bg: var(--card-bg);
    --search-card-ring: color-mix(in srgb, var(--border) 65%, transparent);
    --search-card-shadow: rgb(15 23 42 / 0.08);
    --search-input-bg: color-mix(in srgb, var(--card-bg) 92%, var(--bg) 8%);
    --search-input-placeholder: color-mix(in srgb, var(--text-muted) 70%, transparent);
    background: var(--search-card-bg);
    border-radius: 20px;
    padding: var(--space-5);
    box-shadow: 0 4px 16px var(--search-card-shadow), 0 0 0 1px var(--search-card-ring);
    position: relative;
    overflow: hidden;
    color: var(--text);
}

.theme-dark .search-card {
    --search-card-shadow: rgb(15 23 42 / 0.4);
    --search-card-ring: color-mix(in srgb, var(--border) 80%, transparent);
    --search-input-bg: color-mix(in srgb, var(--card-bg) 88%, transparent);
    --search-input-placeholder: color-mix(in srgb, var(--text-muted) 80%, transparent);
}

.search-card h2 {
    margin-top: 0;
    margin-bottom: var(--space-3);
    font-size: var(--font-step-1);
}

.search-form {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.search-form label {
    flex-basis: 100%;
    font-weight: 600;
    color: var(--text);
}

.search-form .home-search__input-wrapper {
    position: relative;
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.search-form input[type="search"] {
    flex: 1 1 auto;
    border-radius: 16px;
    border: 1px solid var(--border);
    background-color: var(--search-input-bg);
    color: var(--text);
    font-family: inherit;
    font-size: var(--font-step-0);
    font-weight: 500;
    text-align: center;
    padding: var(--space-2) var(--space-3);
    min-height: clamp(2.75rem, 5vw, 3.25rem);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-form input[type="search"]::placeholder {
    color: var(--search-input-placeholder);
    text-align: center;
}

.search-form input[type="search"]:focus-visible {
    border-color: #38bdf8;
    box-shadow:
        0 0 0 4px rgba(56, 189, 248, 0.25),
        0 0 18px rgba(56, 189, 248, 0.35);
    outline: none;
}

.search-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: 16px;
    border: none;
    background: var(--btn-bg);
    color: var(--btn-text);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-family: inherit;
    font-weight: 700;
    padding: var(--space-2) var(--space-4);
    min-height: clamp(2.75rem, 5vw, 3.25rem);
}

.search-form button:hover,
.search-form button:focus-visible {
    background: var(--btn-bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgb(14 165 233 / 0.25);
}

.search-form button:focus-visible {
    outline: none;
}

.search-form button .search-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-step-1);
}

.search-form .search-hint {
    flex-basis: 100%;
    font-size: var(--font-step--1, 0.95rem);
    color: var(--text-muted);
}

@media (max-width: 640px) {
    .search-card {
        padding: var(--space-4) var(--space-3);
        overflow: visible;
    }

    .search-form {
        flex-direction: column;
        align-items: stretch;
    }

    .search-form .home-search__input-wrapper {
        flex: 1 1 auto;
        min-height: auto;
    }

    .search-form input[type="search"],
    .search-form button {
        width: 100%;
        flex: 0 0 auto;
    }

    .home-search__input-wrapper {
        width: 100%;
    }

    .home-search__suggestions {
        top: calc(100% + 0.35rem);
    }
}