.search-wrapper {
    display: flex;
    justify-content: center;
    margin: 2rem auto;
    max-width: 1000px;
    padding: 0 1rem;
    position: -webkit-sticky; /* برای پشتیبانی بهتر در مرورگرهای قدیمی‌تر */
    position: sticky;
    top: 0; /* موقعیت چسبندگی از بالا */
    z-index: 100; /* تنظیم z-index برای قرار گرفتن در بالای سایر المان‌ها */
    background-color: #fff; /* ممکن است نیاز به پس‌زمینه داشته باشد تا قابل مشاهده باشد */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* سایه برای دید بهتر */
}

.search-box {
    flex: 1;
    max-width: 100%;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 40px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    padding: 0 10px;
    gap: 6px;
}

    .search-box input[type="text"] {
        flex: 1;
        border: none;
        outline: none;
        font-size: 1rem;
        padding: 14px 20px;
        border-radius: 40px;
    }

    .search-box button {
        width: 42px;
        height: 42px;
        border: none;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background-color 0.2s ease;
    }

        .search-box button:hover {
            background-color: #f1f1f1;
        }

@media (max-width: 768px) {
    .search-box {
        flex-direction: row;
        padding: 0 6px;
    }

        .search-box input[type="text"] {
            padding: 12px 16px;
            font-size: 0.9rem;
        }

        .search-box button {
            width: 38px;
            height: 38px;
        }
}