Track Your Order

<style>
/* --- CSS 样式开始 --- */

/* 1. 整体布局和容器 */
.shopify-track-order-page {
    /* 保证内容居中 */
    display: flex;
    justify-content: center;
    padding: 40px 20px;
    background-color: #f7f7f7; /* 轻微的背景色 */
}

.track-order-container {
    max-width: 600px; /* 限制最大宽度 */
    width: 100%;
    padding: 30px;
    background-color: #ffffff; /* 白色卡片背景 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 柔和的阴影 */
    border-radius: 8px; /* 圆角边框 */
    text-align: center;
}

/* 2. 标题和提示信息 */
.track-order-heading {
    font-size: 28px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 10px;
}

.track-order-prompt {
    font-size: 16px;
    color: #555555;
    margin-bottom: 5px;
}

.track-order-info {
    font-size: 14px;
    color: #999999;
    margin-bottom: 25px;
}

/* 3. 输入框和按钮组 */
.track-order-form {
    margin-top: 20px;
}

.input-group-wrapper {
    display: flex; /* 启用 Flex 布局 */
    gap: 10px; /* 输入框和按钮之间的间距 */
    margin-bottom: 30px;
}

.tracking-input {
    flex-grow: 1; /* 让输入框占据剩余空间 */
    padding: 12px 15px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 16px;
    color: #333333;
    /* 移除原生焦点样式，添加自定义焦点效果 */
    outline: none;
    transition: border-color 0.3s;
}

.tracking-input:focus {
    border-color: #007bff; /* 焦点主题色 */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.tracking-button {
    /* 保持原代码中的深色 */
    background-color: #0c0504; 
    padding: 12px 25px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s;
}

.tracking-button:hover {
    background-color: #333333; /* 悬停变深 */
}

/* 4. 响应式优化 (Media Queries) */
@media (max-width: 550px) {
    .track-order-container {
        padding: 20px;
        box-shadow: none; 
    }
    
    .input-group-wrapper {
        flex-direction: column; /* 手机上输入框和按钮垂直堆叠 */
        gap: 15px;
    }
    
    .tracking-button {
        width: 100%; /* 按钮宽度占满 */
    }
}

/* --- CSS 样式结束 --- */
</style>
<p>&nbsp;</p >
<div class="shopify-track-order-page">
<div class="track-order-container">
<h2 class="track-order-heading">Track Your Order</h2>
<form role="form" method="get" action="//track.trackingmore.com" class="track-order-form">
<p class="track-order-prompt">Please enter your tracking number below.</p >
<p class="track-order-info">The tracking status might take a few days to be updated, please wait patiently.</p >
<div class="input-group-wrapper"><input type="text" class="tracking-input" id="button_tracking_number" placeholder="E.g. #1234567890" name="button_tracking_number" value="" autocomplete="off" maxlength="100"> <button class="tracking-button" id="query" type="button"> Track Order </button></div>
<input type="hidden" value="en"> <input id="button_express_code" type="hidden" value=""></form>
<div id="TRNum" class="tracking-results-area"></div>
</div>
</div>