.elementor-312 .elementor-element.elementor-element-7b1976a{--display:flex;}/* Start custom CSS for wc-elements, class: .elementor-element-ac77c19 *//* =========================================
   XINARTS 訂單追蹤頁面優化 (Order Tracking)
   ========================================= */

/* 1. 表單容器 - 營造高級卡片感 */
.woocommerce-form-track-order {
    max-width: 600px; /* 限制最大寬度，閱讀更舒適 */
    margin: 40px auto !important; /* 置中並增加上下留白 */
    padding: 40px;
    background-color: #F9F7F2; /* 淺燕麥色背景，比純白更有溫度 */
    border-radius: 4px; /* 微圓角 */
    border: 1px solid #EAEAEA; /* 極細的邊框 */
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); /* 幾乎看不見的立體感 */
}

/* 2. 說明文字 */
.woocommerce-form-track-order > p {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #555555;
    margin-bottom: 30px !important;
    text-align: center; /* 文字置中比較優雅 */
}

/* 3. 輸入框標籤 (Label) */
.woocommerce-form-track-order label {
    font-size: 14px;
    font-weight: 700;
    color: #3E3A39; /* 深炭灰 */
    margin-bottom: 8px;
    display: block;
    letter-spacing: 1px;
}

/* 4. 輸入欄位 (Input Fields) */
.woocommerce-form-track-order .input-text {
    width: 100%;
    padding: 15px 20px !important; /* 加大內距，打字更舒服 */
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD !important;
    border-radius: 2px !important;
    font-size: 16px;
    color: #3E3A39;
    transition: all 0.3s ease;
}

/* 輸入框選中狀態 (Focus) */
.woocommerce-form-track-order .input-text:focus {
    border-color: #D95F42 !important; /* 聚焦時變赤陶紅 */
    outline: none;
    box-shadow: 0 0 0 3px rgba(217, 95, 66, 0.1); /* 淡淡的紅色光暈 */
}

/* 佔位符文字顏色 (Placeholder) */
.woocommerce-form-track-order .input-text::placeholder {
    color: #BBBBBB;
    font-size: 14px;
}

/* 5. 欄位排版優化 */
.woocommerce-form-track-order .form-row {
    margin-bottom: 25px;
    float: none !important; /* 移除原本的浮動，強制垂直排列 */
    width: 100% !important; /* 讓兩個欄位都佔滿寬度，更大氣 */
}

/* 6. 追蹤按鈕 (Button) */
.woocommerce-form-track-order button.button {
    width: 100%; /* 按鈕全寬，方便點擊 */
    background-color: #D95F42 !important; /* 品牌赤陶紅 */
    color: #FFFFFF !important;
    padding: 15px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 2px; /* 增加字距 */
    border-radius: 2px !important;
    border: none;
    transition: all 0.3s ease;
    margin-top: 10px;
}

/* 按鈕懸停效果 */
.woocommerce-form-track-order button.button:hover {
    background-color: #3E3A39 !important; /* 深炭灰 */
    transform: translateY(-2px); /* 微浮起 */
}

/* --- 📱 手機版專屬優化 (Mobile) --- */
@media (max-width: 767px) {
    .woocommerce-form-track-order {
        padding: 25px 20px; /* 手機版內距縮小 */
        margin: 20px auto !important;
        border: none; /* 手機版去除邊框，讓它看起來更像原生 App */
        background-color: transparent; /* 手機版背景透明，直接融入頁面 */
        box-shadow: none;
    }

    .woocommerce-form-track-order .input-text {
        font-size: 16px; /* 防止 iOS 自動縮放 */
        padding: 12px 15px !important;
    }

    .woocommerce-form-track-order > p {
        text-align: left; /* 手機版靠左閱讀較自然 */
        font-size: 14px;
    }
}/* End custom CSS */