/*!
 * 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;
}

/* ============ 版塊標題（左側藍豎線，與 turing-about.css 對齊）============ */
.support-section { margin-bottom: 0.260417rem; }
.support-section .section-title {
    position: relative;
    color: #eeeef2;
    font-size: 0.125rem;            /* 24px */
    font-weight: 500;
    padding-left: 0.072917rem;
    line-height: 0.15625rem;
    margin: 0 0 0.0625rem;
}
.support-section .section-title::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 0.015625rem;
    height: 0.104167rem;
    background: #2882ff;
    border-radius: 0.015625rem;
}
.support-intro {
    color: #b2b2c9;
    font-size: 0.078125rem;         /* 15px */
    line-height: 0.125rem;
    margin: 0 0 0.15625rem;
}

/* ============ 查詢表單（深色卡片）============ */
.support-form {
    border-radius: 0.041667rem;
    border: 0.005208rem solid #292932;
    background: linear-gradient(135deg, #1c1c24 0%, #222228 100%);
    padding: 0.1875rem 0.208333rem;
    margin-bottom: 0.15625rem;
}
.support-row {
    display: flex;
    align-items: flex-end;
    gap: 0.125rem;
}
.support-field {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.support-label {
    color: #b2b2c9;
    font-size: 0.072917rem;         /* 14px */
    font-weight: 500;
    margin-bottom: 0.041667rem;
    letter-spacing: 0.02em;
}
.support-input {
    width: 100%;
    box-sizing: border-box;
    height: 0.1875rem;              /* 36px */
    padding: 0 0.072917rem;
    border: 0.005208rem solid #3d3d4a;   /* 提亮邊框，輪廓清晰可見 */
    border-radius: 0.020833rem;
    background: #16161d;                 /* 內凹槽底色（比頁面略亮、比卡片深） */
    color: #eeeef2;
    font-size: 0.078125rem;         /* 15px */
    line-height: 0.1875rem;
    outline: none;
    box-shadow: inset 0 0.005208rem 0.010417rem rgba(0, 0, 0, 0.25); /* 凹陷質感 */
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.support-input::placeholder { color: #6e6e7a; }   /* 提亮 placeholder */
.support-input:hover { border-color: #50505f; }
.support-input:focus {
    border-color: #2882ff;
    background: #1a1a22;
    box-shadow: inset 0 0.005208rem 0.010417rem rgba(0, 0, 0, 0.2),
                0 0 0 0.005208rem rgba(40, 130, 255, 0.5);
}

/* 查詢按鈕（藍底白字，對齊主色 #1664ff） */
.support-btn {
    flex-shrink: 0;
    height: 0.1875rem;              /* 36px */
    min-width: 0.3125rem;           /* 60px */
    padding: 0 0.083333rem;
    border: none;
    border-radius: 0.020833rem;
    background: linear-gradient(135deg, #1664ff 0%, #1a75ff 100%);
    color: #fff;
    font-size: 0.078125rem;         /* 15px */
    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.010417rem);
    box-shadow: 0 0.041667rem 0.104167rem rgba(22, 100, 255, 0.35);
}
.support-btn:active { transform: translateY(0); }
.support-btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

/* 提示文案（錯誤 / 空校驗） */
.support-tip {
    margin: 0.0625rem 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;
}

/* 進度時間線 */
.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; margin-bottom: 0.16rem; }

    /* 表單改為單列堆疊，按鈕全寬 */
    .support-form { padding: 0.16rem; }
    .support-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.14rem;
    }
    .support-label { font-size: 0.085rem; margin-bottom: 0.05rem; }
    .support-input {
        height: 0.24rem;            /* 移動端觸控高度 ~46px */
        font-size: 0.085rem;
        line-height: 0.24rem;
        padding: 0 0.08rem;
    }
    .support-btn {
        width: 100%;
        height: 0.24rem;
        font-size: 0.085rem;
    }
    .support-tip { font-size: 0.085rem; line-height: 0.14rem; min-height: 0.14rem; }

    /* 結果卡片 */
    .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; }
}