/*!
 * turing-support.css — 服務支持 / 售後查詢頁樣式
 *
 * 復用 turing 設計系統（與 turing-contact.css / turing-about.css 對齊）：
 *   - 設計稿寬度 1920px (desktop) / 540px (mobile)，1rem = 192px (由 turing.js 設置)
 *   - 配色：bg #101014 / card #222228 / text #eeeef2 / sub #b2b2c9
 *   - 主色：#1664ff / #2882ff / #50a7ff / 邊框 #292932 / 圓角 0.041667rem
 */

/* ============ 頁面容器（對齊 .contact-page）============ */
.support-page {
    position: relative;
    min-height: 100vh;
    padding: 0.416667rem 1.51042rem 0.520833rem;
    background: #101014;
}
@media (max-width: 1900px) { .support-page { padding: 0.416667rem 1.015625rem 0.520833rem; } }
@media (max-width: 1700px) { .support-page { padding: 0.416667rem 0.8125rem 0.520833rem; } }
@media (max-width: 1630px) { .support-page { padding: 0.416667rem 0.3125rem 0.520833rem; } }
@media (max-width: 1240px) { .support-page { padding: 0.416667rem 0.208333rem 0.520833rem; } }
@media (max-width: 768px)  { .support-page { padding: 0.30rem 0.16rem 0.40rem; } }

.support-wrap {
    position: relative;
    z-index: 1;
    max-width: 14.583333rem;   /* 2800px */
    margin: 0 auto;
}

/* 背景圖層 */
.support-page .bg-body {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    height: 2.157328rem;
    z-index: 0;
    pointer-events: none;
}

/* ============ 麵包屑 / 頁面標題（復用同名類）============ */
.support-page .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: #b2b2c9;
    font-size: 0.072917rem;
    line-height: 0.125rem;
    margin-bottom: 0.15625rem;
}
.support-page .breadcrumb a {
    color: #b2b2c9;
    text-decoration: none;
    transition: color 0.2s;
}
.support-page .breadcrumb a:hover { color: #50a7ff; }
.support-page .breadcrumb .sep {
    margin: 0 0.041667rem;
    color: #4a4a55;
}
.support-page .breadcrumb .current { color: #eeeef2; }

.support-page .page-head { margin-bottom: 0.260417rem; }
.support-page .page-title {
    color: #eeeef2;
    font-size: 0.1875rem;
    font-weight: 500;
    line-height: 0.1875rem;
    margin: 0 0 0.0625rem;
}
.support-page .page-subtitle {
    color: #b2b2c9;
    font-size: 0.083333rem;
    line-height: 0.125rem;
    margin: 0;
}

/* ============ 版塊 / 主卡片 ============ */
.support-section { margin-bottom: 0.260417rem; }

/* 主卡片：頭部 + 查詢條 + 結果的承載容器 */
.support-panel {
    position: relative;
    border: 0.005208rem solid #2a2a34;
    border-radius: 0.0625rem;
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(40, 130, 255, 0.08) 0%, transparent 42%),
        linear-gradient(180deg, #1a1a22 0%, #15151b 100%);
    padding: 0.208333rem 0.260417rem 0.229167rem;
    box-shadow: 0 0.041667rem 0.104167rem rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
/* 卡片頂部一條細高光線，增加質感 */
.support-panel::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0.005208rem;
    background: linear-gradient(90deg, transparent, rgba(40, 130, 255, 0.55), transparent);
}

/* 卡片頭：圖標 + 標題/副說明 */
.support-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 0.09375rem;
    margin-bottom: 0.1875rem;
}
.support-panel-icon {
    flex-shrink: 0;
    width: 0.145833rem;             /* 28px */
    height: 0.145833rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.03125rem;
    background: rgba(40, 130, 255, 0.14);
    border: 0.005208rem solid rgba(40, 130, 255, 0.35);
    color: #50a7ff;
}
.support-panel-icon svg { width: 0.083333rem; height: 0.083333rem; }
.support-panel-text { min-width: 0; }
.support-panel-text .section-title {
    color: #eeeef2;
    font-size: 0.114583rem;         /* 22px */
    font-weight: 600;
    line-height: 0.145833rem;
    margin: 0 0 0.03125rem;
}
.support-intro {
    color: #8a8a99;
    font-size: 0.072917rem;         /* 14px */
    line-height: 0.114583rem;
    margin: 0;
    max-width: 3.645833rem;         /* 限制寬度，避免過長一行 */
}

/* 無障礙：隱藏的可讀 label（搜索條用圖標代替視覺 label） */
.support-sr-label {
    position: absolute;
    width: 0.005208rem; height: 0.005208rem;
    padding: 0; margin: -0.005208rem;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============ 查詢表單（居中搜索條）============ */
.support-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.072917rem;               /* SN 行與驗證碼行之間的間距 */
    margin-bottom: 0.166667rem;
}
/* 搜索條 / 驗證碼行：共用膠囊容器樣式 */
.support-search,
.support-captcha-row {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 3.645833rem;         /* 700px，居中收束，避免獨佔整行 */
    height: 0.208333rem;            /* 40px */
    padding: 0 0.020833rem 0 0;
    border: 0.005208rem solid #3d3d4a;
    border-radius: 0.104167rem;     /* 膠囊圓角 */
    background: #16161d;
    box-shadow: 0 0.010417rem 0.020833rem rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.support-search:hover,
.support-captcha-row:hover { border-color: #50505f; }
.support-search:focus-within,
.support-captcha-row:focus-within {
    border-color: #2882ff;
    box-shadow: 0 0 0 0.005208rem rgba(40, 130, 255, 0.4);
}
/* 搜索條左側圖標 */
.support-search-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.15625rem;
    height: 100%;
    color: #6e6e7a;
    pointer-events: none;
}
.support-search-icon svg { width: 0.078125rem; height: 0.078125rem; }
.support-search:focus-within .support-search-icon { color: #50a7ff; }

/* 輸入框（去掉獨立邊框，融入搜索條） */
.support-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    padding: 0 0.052083rem;
    border: none;
    background: transparent;
    color: #eeeef2;
    font-size: 0.078125rem;         /* 15px */
    line-height: 1;
    outline: none;
}
.support-input::placeholder { color: #6e6e7a; }

/* 驗證碼輸入框：窄寬，不佔滿 */
.support-captcha-input {
    flex: 0 0 1.041667rem;           /* 200px 固定寬 */
    padding-left: 0.072917rem;
}
/* 驗證碼圖片 */
.support-captcha-img {
    flex-shrink: 0;
    height: 0.1875rem;               /* 36px，放大显示，字符更醒目 */
    width: auto;
    max-width: 0.729167rem;          /* 140px */
    margin: 0 0.03125rem;
    border-radius: 0.020833rem;
    cursor: pointer;
    user-select: none;
    background: #fff;
}
.support-captcha-img:hover { opacity: 0.85; }

/* 查詢按鈕（藍底白字，對齊主色 #1664ff，融入搜索條右端） */
.support-btn {
    flex-shrink: 0;
    height: 0.166667rem;            /* 32px，比搜索條略矮，留出上下呼吸 */
    min-width: 0.3125rem;           /* 60px */
    padding: 0 0.09375rem;
    border: none;
    border-radius: 0.083333rem;
    background: linear-gradient(135deg, #1664ff 0%, #1a75ff 100%);
    color: #fff;
    font-size: 0.072917rem;         /* 14px */
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.support-btn:hover {
    transform: translateY(-0.005208rem);
    box-shadow: 0 0.020833rem 0.052083rem rgba(22, 100, 255, 0.4);
}
.support-btn:active { transform: translateY(0); }
.support-btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

/* 提示文案（錯誤 / 空校驗），與搜索條等寬左對齊 */
.support-tip {
    width: 100%;
    max-width: 3.645833rem;
    margin: 0.052083rem 0 0;
    color: #ff6b6b;
    font-size: 0.072917rem;         /* 14px */
    line-height: 0.114583rem;
    min-height: 0.114583rem;
}
.support-tip.is-ok { color: #3ec98f; }

/* ============ 查詢結果區 ============ */
.support-result { animation: supportFadeIn 0.35s ease; }
@keyframes supportFadeIn {
    from { opacity: 0; transform: translateY(0.020833rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 結果卡片 */
.support-result-card {
    border-radius: 0.041667rem;
    border: 0.005208rem solid #292932;
    background: #222228;
    padding: 0.166667rem 0.1875rem;
}
.support-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.0625rem;
    margin-bottom: 0.125rem;
}
.support-result-title {
    color: #eeeef2;
    font-size: 0.104167rem;         /* 20px */
    font-weight: 600;
    margin: 0;
}
.support-reset-btn {
    border: 0.005208rem solid #292932;
    border-radius: 0.020833rem;
    background: transparent;
    color: #b2b2c9;
    font-size: 0.072917rem;         /* 14px */
    padding: 0.03125rem 0.072917rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}
.support-reset-btn:hover { color: #50a7ff; border-color: #2882ff; }

/* 狀態徽章：待處理(橙) / 進行中(藍) / 已完成(綠) */
.support-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.020833rem;
    padding: 0.020833rem 0.052083rem;
    border-radius: 0.020833rem;
    font-size: 0.067708rem;         /* 13px */
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
}
.support-badge::before {
    content: "";
    width: 0.020833rem;
    height: 0.020833rem;
    border-radius: 50%;
    background: currentColor;
}
.support-badge.is-pending    { color: #f0a020; background: rgba(240, 160, 32, 0.12); }
.support-badge.is-processing { color: #2882ff; background: rgba(40, 130, 255, 0.14); }
.support-badge.is-done       { color: #3ec98f; background: rgba(62, 201, 143, 0.12); }

/* 訂單詳情網格 */
.support-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.0625rem 0.125rem;
    padding: 0.125rem;
    border-radius: 0.020833rem;
    background: #101014;
    margin-bottom: 0.125rem;
}
.support-detail-item { min-width: 0; }
.support-detail-label {
    display: block;
    color: #50a7ff;
    font-size: 0.067708rem;         /* 13px */
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 0.020833rem;
}
.support-detail-value {
    display: block;
    color: #eeeef2;
    font-size: 0.078125rem;         /* 15px */
    font-weight: 500;
    line-height: 0.114583rem;
    word-break: break-word;
}
/* 處理說明（remark）獨立成行、單列全寬，長文本更易讀 */
.support-detail--remark {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.0625rem;
    padding: 0.125rem;
    border-radius: 0.020833rem;
    background: #101014;
    margin-bottom: 0.125rem;
}
.support-detail--remark .support-detail-value { color: #cfd2dc; font-weight: 400; }

/* 進度時間線 */
.support-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.020833rem;
    padding-top: 0.041667rem;
}
.support-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    min-width: 0;
}
.support-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0.036458rem;
    left: 50%;
    right: -50%;
    height: 0.005208rem;
    background: #292932;
    z-index: 0;
}
.support-step.is-done:not(:last-child)::after { background: #2882ff; }
.support-step-dot {
    position: relative;
    z-index: 1;
    width: 0.078125rem;             /* 15px */
    height: 0.078125rem;
    border-radius: 50%;
    border: 0.005208rem solid #292932;
    background: #222228;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.041667rem;
    transition: all 0.3s ease;
}
.support-step.is-done .support-step-dot {
    border-color: #2882ff;
    background: #2882ff;
}
.support-step.is-active .support-step-dot {
    border-color: #2882ff;
    background: #222228;
    box-shadow: 0 0 0 0.005208rem rgba(40, 130, 255, 0.4);
}
.support-step.is-active .support-step-dot::after {
    content: "";
    width: 0.03125rem;
    height: 0.03125rem;
    border-radius: 50%;
    background: #2882ff;
}
.support-step-name {
    color: #b2b2c9;
    font-size: 0.067708rem;         /* 13px */
    font-weight: 500;
    line-height: 0.09375rem;
    transition: color 0.3s ease;
}
.support-step.is-done .support-step-name,
.support-step.is-active .support-step-name { color: #eeeef2; }

/* 未查到記錄的提示態 */
.support-result-empty {
    text-align: center;
    color: #b2b2c9;
    font-size: 0.078125rem;
    line-height: 0.125rem;
    padding: 0.166667rem;
}

/* ============ 響應式 ============ */
@media (max-width: 1024px) {
    .support-detail { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .support-page .page-title { font-size: 0.20rem; }
    .support-page .page-subtitle { font-size: 0.09rem; }
    .page-head { margin-bottom: 0.24rem; }

    .support-section .section-title { font-size: 0.13rem; }
    .support-intro { font-size: 0.085rem; line-height: 0.15rem; }

    /* 主卡片內邊距收緊 */
    .support-panel { padding: 0.16rem 0.16rem 0.18rem; }
    .support-panel-head { gap: 0.07rem; margin-bottom: 0.16rem; }
    .support-panel-icon { width: 0.13rem; height: 0.13rem; }
    .support-panel-icon svg { width: 0.075rem; height: 0.075rem; }

    /* 搜索條 / 驗證碼行：全寬、提高觸控高度 */
    .support-search,
    .support-captcha-row {
        max-width: none;
        height: 0.24rem;            /* 移動端觸控高度 ~46px */
    }
    .support-input { font-size: 0.085rem; padding: 0 0.06rem; }
    .support-captcha-input { flex-basis: 1.2rem; }   /* 驗證碼輸入框移動端略寬 */
    .support-captcha-img { height: 0.1875rem; max-width: 0.8rem; }
    .support-btn {
        height: 0.1875rem;          /* 36px */
        min-width: 0.4rem;
        padding: 0 0.1rem;
        font-size: 0.085rem;
    }
    .support-tip { font-size: 0.085rem; line-height: 0.14rem; min-height: 0.14rem; max-width: none; }

    /* 結果卡片 */
    .support-result-card { padding: 0.14rem 0.16rem; }
    .support-result-title { font-size: 0.12rem; }
    .support-reset-btn { font-size: 0.085rem; padding: 0.04rem 0.08rem; }
    .support-badge { font-size: 0.08rem; padding: 0.025rem 0.06rem; }

    /* 詳情網格改單列 */
    .support-detail { grid-template-columns: 1fr; gap: 0.08rem; padding: 0.12rem; }
    .support-detail-label { font-size: 0.08rem; }
    .support-detail-value { font-size: 0.085rem; line-height: 0.13rem; }

    /* 時間線節點放大 */
    .support-step-dot { width: 0.085rem; height: 0.085rem; }
    .support-step-name { font-size: 0.075rem; line-height: 0.1rem; }
    .support-result-empty { font-size: 0.085rem; padding: 0.14rem; }
}