/*====================================================================
  REUSABLE SEARCH BAR – Chess-Themed, Responsive, Dark-Mode Safe
====================================================================*/

.search-bar-wrapper {
    max-width: 100%;
    margin-bottom: 1.5rem;
}

    .search-bar-wrapper .input-group {
        border-radius: 50px;
        overflow: hidden;
        background-color: var(--background-color);
        border: 2px solid var(--accent-color);
        transition: all 0.3s ease;
    }

        .search-bar-wrapper .input-group:focus-within {
            box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-color), transparent 75%);
            border-color: var(--accent-color);
        }

    .search-bar-wrapper .input-group-text {
        background: transparent;
        border: none;
        color: var(--accent-color);
        padding-left: 1rem;
    }

    .search-bar-wrapper .search-input {
        border: none;
        background: transparent;
        color: var(--default-color);
        font-size: 1.1rem;
        padding: 0.75rem 1rem;
    }

        .search-bar-wrapper .search-input::placeholder {
            color: color-mix(in srgb, var(--default-color), transparent 50%);
            font-style: italic;
        }

    .search-bar-wrapper .btn-outline-secondary {
        border: none;
        color: var(--default-color);
        background: color-mix(in srgb, var(--default-color), transparent 90%);
    }

        .search-bar-wrapper .btn-outline-secondary:hover {
            background: var(--accent-color);
            color: var(--contrast-color);
        }

/* Mobile */
@media (max-width: 576px) {
    .search-bar-wrapper .search-input {
        font-size: 1rem;
    }
}