

   /* استایل‌های CSS */
    .order-status-widget {
        font-family: inherit; /* استفاده از فونت قالب شما */
        padding: 20px;
        border: 0px solid #ddd;
        border-radius: 8px;
        background-color: #ECE8F4;
        max-width: 500px;
        margin: 20px auto;
    }

    .order-status-widget h3 {
        color: #333;
        font-size: 18px;
        margin-bottom: 15px;
        text-align: center;
        min-height: 24px; /* جلوگیری از پرش صفحه */
    }

    .input-group {
        display: flex;
        flex-direction: row; /* حالت دسکتاپ: سطری */
        gap: 10px;
        align-items: center;
    }

    .input-group input {
        flex: 1; /* ورودی فضای باقی‌مانده را پر کند */
        padding: 10px;
        border: 0px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
    }

    .input-group button {
        padding: 10px 20px;
        background-color: #03a9f4; /* رنگ دکمه (آبی وردپرس) */
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        transition: background 0.3s;
    }

    .input-group button:hover {
        background-color: #005177;
    }

    /* حالت موبایل: فلکس ستونی */
    @media (max-width: 768px) {
        .input-group {
            flex-direction: column; /* ستونی شدن در موبایل */
        }
        .order-status-widget
        {
            width: 90% !important;
        }
        .input-group input,
        .input-group button {
            width: 100%; /* تمام عرض در موبایل */
        }
    }