@charset "utf-8";

/*
========================================================================
中性色主題 — 結構性覆蓋層
------------------------------------------------------------------------
色票本身定義在 app.css / reseller.css 的 :root，本檔只處理「換色票解決
不了」的部分：全站網格背景、header 去色塊化、深底白字元件反轉。

載入順序：以 order => 2 註冊，確保排在所有 order => 1 的主題 CSS
（app.css / common.css / subscription.css / auth.css）之後。
========================================================================
*/


/*
========================
1. 全站網格 + 霧氣背景
------------------------
原本綁在 auth.css 的 body[id^="auth-"] 選擇器上，這裡放大到全站。
auth 頁自身的規則特異度更高且內容相同，不會衝突。
========================
*/
body {
    background: url(../image/auth/login-bg-tile-large.jpg) repeat 50% 50% fixed;
    background-size: 260px 260px;
}

body::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: url(../image/auth/cloud-combination.jpg) no-repeat center center fixed;
    background-size: cover;
    opacity: .4;
    pointer-events: none;
    z-index: -2;
}

/* 內容層維持透明，讓背景透出來 */
#container,
#main-wrapper,
#main-inner,
#footer-wrapper                 { background: none; }


/*
========================
2. Header 去色塊化
------------------------
原本是 --theme-bg-color 實心色塊 + 白色 logo + 兩顆圓角補丁，
改為透明底、深色字；logo 維持品牌原色（logo.svg），在淺色 header 上清晰可見。
========================
*/
#header-wrapper.bg-theme        { background-color: transparent; color: var(--dark-text-color); }
#header-inner h1 a              { background-image: url(../image/logos/logo.svg); }
.header-corner                  { display: none; }

#header-nav a,
#header-icons a                 { color: var(--neutral-mid); opacity: 1; }
#header-nav a:hover,
#header-icons a:hover           { color: var(--dark-text-color); }

/* 手機側欄仍需實心底才看得清楚，維持深灰半透明 */
#nav-wrapper.bg-theme-transparent { background-color: var(--theme-bg-transparent); color: #fff; }

/* 捲動時 header 疊在內容上，補一層極淡霧面避免文字糊掉 */
#header-wrapper.bg-theme::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-color: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* feedback banner 原本用主題色補滿 header 後方，改為透明 */
#feedback-header::before        { background-color: transparent; }


/*
========================
3. 深底白字 → 淺灰底深字
------------------------
表頭一律改為 --neutral-7 淺灰底 + --neutral-dark 深字，
搭配一條 --neutral-light 底線維持欄位分界。
========================
*/
#cart-table .row.header .col,
#order-review #order-detail .header .col,
.addon-manage-table li.header > div {
    background-color: var(--neutral-7);  
    color: var(--dark-text-color);
    /*border-bottom: 1px solid var(--neutral-light);*/
}

/* profile 卡片表頭改為白底（比照設計稿），僅留底線分界 */
.list-table.profile-table li.header > div {
    background-color: #fff;
    color: var(--dark-text-color);
    border-bottom: 1px solid var(--neutral-lighter);
}

/* 表格本體改為白底，浮在網格背景上 */
#cart-table,
#order-review #order-detail,
.addon-manage-table,
.list-table.profile-table       { background-color: #fff; }

/* 資料列僅靠隔行淺灰區分（不畫每列分隔線）；淺色列＝#f3f3f3，白色列維持白 */
.list-table.profile-table li:not(.header):nth-child(odd) > div { background-color: var(--neutral-7); }

/* ── 手機版：profile 資料表 → 堆疊卡片（每列一張卡、每格 label:值），
   取代橫向捲動/擠壓，讓所有欄位在窄螢幕都完整呈現。
   儲存格以 data-label 提供欄位名，無 data-label 者（方案/操作）不顯示標籤 ── */
@media screen and (max-width: 768px) {
    /* 只作用在表格「直接子代」的列 li 與其儲存格 div；
       用 > 避免誤傷巢狀清單（如 .addon-display-item 也是 <li>）*/
    .list-table.profile-table                            { display: block; }
    .list-table.profile-table > li.header                { display: none; }
    .list-table.profile-table > li                       { display: block; padding: 16px 20px; }
    .list-table.profile-table > li:not(:last-child)      { border-bottom: 1px solid var(--neutral-lighter); }
    .list-table.profile-table > li:not(.header):nth-child(odd) > div { background: none; }
    .list-table.profile-table > li > div {
        display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
        width: auto !important; padding: 5px 0; text-align: right; border: none; background: none;
        font-size: 14px;
    }
    .list-table.profile-table > li > div[data-label]::before {
        content: attr(data-label);
        font-weight: 500; color: var(--neutral-mid); text-align: left; white-space: nowrap; flex-shrink: 0;
    }
    /* 無 data-label 的格（如操作按鈕）靠左、不顯示標籤 */
    .list-table.profile-table > li > div:not([data-label]) { justify-content: flex-start; text-align: left; }

    /* 操作/連結欄位（.actions / .col-action）：淺灰、靠右、無底線、不顯示欄名（比照設計稿）*/
    .list-table.profile-table > li > div.actions,
    .list-table.profile-table > li > div.col-action {
        justify-content: flex-end; text-align: right; border: none;
    }
    .list-table.profile-table > li > div.actions::before,
    .list-table.profile-table > li > div.col-action::before { content: none; }
    .list-table.profile-table > li > div.actions a,
    .list-table.profile-table > li > div.actions .text-button,
    .list-table.profile-table > li > div.actions button,
    .list-table.profile-table > li > div.col-action a,
    .list-table.profile-table > li > div.col-action .text-button,
    .list-table.profile-table > li > div.col-action button { color: var(--neutral-5); font-size: 14px; }

    /* 帳單/付款：資料值靠左（label 固定寬對齊、值緊接其後）。訂閱維持值靠右不動 */
    #my-orders   .profile-table > li > div[data-label],
    #my-payments .profile-table > li > div[data-label] {
        justify-content: flex-start; text-align: left; gap: 10px;
    }
    #my-orders   .profile-table > li > div[data-label]::before,
    #my-payments .profile-table > li > div[data-label]::before { min-width: 84px; }

     #auth-delete-account .profile-content .profile-box { padding: 0; }
}


/*
========================
3b. Profile 版面兩種型態
------------------------
清單型（我的訂閱/帳單/發票）：.profile-content 透明，每個內層
  .profile-box 各自成卡（白底/圓角/陰影）。
分頁型（.has-tabs：用戶資料/變更密碼/付款方式/刪除帳號）：外層
  .profile-content 本身是卡片，tabs 貼齊卡片頂端，內層內容 flush
  不再各自成卡（避免卡中卡）。
========================
*/
/* 清單型：內層各自成卡 */
.profile-content .profile-box {
    background-color: #fff;
    border: 1px solid var(--neutral-lighter);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(53, 56, 58, .06);
}

/* 分頁型：外層才是卡片。水平內距歸零，改由 tabs / 內容各自提供 40px，
   如此 tabs 底線能橫跨整張卡片不斷開 */
.profile-content.has-tabs {
    padding: 0 0 40px 0;
    background-color: #fff;
    box-shadow: 2px 2px 10px #8282821A; 
    border: 1px solid var(--neutral-light);
    border-radius: 20px;
}
/* tabs 底線橫跨整張卡片（ul 滿版、僅內距縮排項目）；項目靠左、間距拉寬 */
.profile-content.has-tabs .profile-tabs {
    margin: 0 0 48px 0;
    padding: 0 56px;
    border-bottom: 1px solid var(--neutral-light);
    justify-content: flex-start;
    gap: 4.5em;
}
/* 內層內容 flush，取消各自的卡片外觀；水平內距與 tabs 對齊（56px）*/
.profile-content.has-tabs .profile-box {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 56px;
}

@media screen and (max-width: 640px) {
    .profile-content.has-tabs                 { border-radius: 14px; }
    /* tabs 與內容間距在手機收斂，減少頂端浪費空間 */
    .profile-content.has-tabs .profile-tabs   { padding: 0 18px; gap: 1.3em; margin-bottom: 26px; }
    .profile-content.has-tabs .profile-tabs li { font-size: .95em; }
    .profile-content.has-tabs .profile-tabs li a { padding: 1.35em 0; }
    .profile-content.has-tabs .profile-box    { padding-left: 20px; padding-right: 20px; }
}

/* profile 頁表單欄位不要陰影（比照設計稿，欄位下方去除投影）*/
.profile-page .auth-form input[type="text"],
.profile-page .auth-form input[type="password"],
.profile-page .auth-form input[type="email"],
.profile-page .auth-form .input-label,
.profile-page .auth-form textarea       { box-shadow: none; }

/* 發票明細表：在 #order-review 卡片內再卡片化（白底 grey 表頭 圓角 陰影）
   卡片外觀掛在 block 容器 #order-detail，overflow:hidden 才能裁圓表頭 */
#order-review #order-detail {
    border: 1px solid var(--neutral-lighter);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(53, 56, 58, .06);
    background-color: #fff;
    margin-bottom: 25px;
}
/* 隔行淺灰(#f3f3f3)：表頭(child1)後第一筆(child2)維持白，第二筆(child3,odd)起淺灰，避免第一列與表頭黏成一整塊灰 */
#order-review #order-detail .item:nth-child(odd) .col { background-color: var(--neutral-7); }
#order-review #order-detail .item .col                 { border-top: 1px solid var(--neutral-lighter); }


/*
========================
4. 結帳步驟指示器
------------------------
未完成步驟＝淺灰實心圓；進行中＝白底細框 + 深色圖示。
========================
*/
#checkout-indicator .icon {
    border: none;
    background-color: var(--neutral-7);
    color: var(--neutral-5);
}

#checkout-indicator .set.active .icon {
    background-color: #fff;
    border: 1px solid var(--neutral-light);
    color: var(--dark-text-color);
}

#checkout-indicator .dot {
    background-color: var(--neutral-6);
    border: 2px solid transparent;
}

#checkout-indicator .set.active .dot {
    background-color: #fff;
    border-color: var(--neutral-1);
}


/*
========================
5. 結帳頁面板
------------------------
比照設計稿，把結帳流程收進一張大圓角淺色面板。
========================
*/
body[id="subscription-checkout"] #main-inner,
body[id="subscription-confirm"] #main-inner,
body[id="subscription-order-complete"] #main-inner,
body[id="subscription-order-failed"] #main-inner,
body[id="subscription-order-bank-transfer"] #main-inner {
    padding: 40px 4%;
    background-color: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 1px solid var(--neutral-light);
    border-radius: 20px;
}


/*
========================
6. 按鈕與footer收尾
========================
*/
.button-light:hover             { box-shadow: 3px 3px 12px rgba(53, 56, 58, .15); }
#footer-inner                   { border-top-color: var(--neutral-light); color: var(--neutral-mid); }
#footer-inner .social-links li a { border-color: var(--neutral-light); }


/*
========================
7. 手機版漢堡鈕
------------------------
原本是白色橫線，靠深色 header 襯托；header 改透明後會整個消失。
關閉時用深灰，展開時側欄是深底，改回白色。
========================
*/
@media screen and (max-width: 1024px) {
    #menu-button span           { background-color: var(--dark-text-color); opacity: .8; }
    .show-nav #menu-button span { background-color: #fff; opacity: .9; }
    /* 導覽整併：手機改由漢堡側選單當唯一入口，footer 連結列隱藏，只留社群+版權 */
    #shop-footer-nav            { display: none; }
    /* footer 保留社群圖示（原設計於手機隱藏，這裡還原）+ 版權 */
    #footer-inner .social-links { display: inline-flex; margin-bottom: 18px; }
}


/*
========================
8. 窄螢幕精修（≤400px，含 320px）
------------------------
極窄螢幕下收斂裝飾元素、內距與字距，讓每處比例都完整。
========================
*/
@media screen and (max-width: 400px) {
    /* profile 側欄 nav：隱藏裝飾圖示、縮內距，讓三個項目在 320px 排得下 */
    #profile-nav ul                 { gap: 4px; }
    #profile-nav a                  { padding: .8em 6px; font-size: .92em; gap: 0; }
    #profile-nav a i                { display: none; }

    /* 卡片列內距收斂，爭取內容空間 */
    .list-table.profile-table > li  { padding: 14px 14px; }

    /* has-tabs 內容兩側內距收斂，避免窄螢幕左右浪費 */
    .profile-content.has-tabs .profile-box     { padding-left: 16px; padding-right: 16px; }
}

/* ≤360px：極窄機型才需要的收斂（375/390 常見機型維持較舒適的 tabs） */
@media screen and (max-width: 360px) {
    .profile-content.has-tabs .profile-tabs    { padding: 0 12px; gap: .8em; }
    .profile-content.has-tabs .profile-tabs li { font-size: .82em; letter-spacing: .03em; }
    .profile-content.has-tabs .profile-box     { padding-left: 12px; padding-right: 12px; }
}