/**
 * Theme Name: Jingrui Core System WP ｜ 靜睿網站核心系統
 * Author: 靜睿設計所 施睿皇 Ray
 * Author URI: https://www.jingruidesign.com/
 * Description: 本專案為 靜睿設計所 (Jingrui Design Studio) 獨家構建的「Jingrui Core System WP 靜睿網站核心系統」，旨在為所有客戶專案奠定堅實的數位地基與資安防禦屏障。本系統深度整合高規格 HMAC-SHA256 安全憑證、全站去 Emoji 莫蘭迪綠視覺規範、動態授權維護、自動續約通知與全站轉場 Loading 介面。
 * Version: 3.5.0
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: jingrui-core-system-wp
 * Template: astra
 * Last Updated: 2026-07-23
 * Copyright: Copyright (c) 2026 靜睿設計所 Jingrui Design Studio. All rights reserved.
 */


@charset "UTF-8";


/* ==========================================================================
   1. 模組區塊與子樣式表匯入 (必須置於最頂端，否則瀏覽器會忽略載入)
   ========================================================================== */
@import url(css/home.css);
@import url(css/about.css);
@import url(css/news.css);
@import url(css/service.css);
@import url(css/contact.css);
@import url(css/gallery.css);
@import url(css/portfolio.css);
@import url(css/shop.css);
@import url(css/membership.css);

/* 模組區塊「Module」 */
@import url(css/Module/common.css);
@import url(css/Module/header.css);
@import url(css/Module/footer.css);
@import url(css/Module/navbar.css);
@import url(css/Module/main.css);
@import url(css/Module/sidebar.css);
@import url(css/Module/floating-window.css);
@import url(css/Module/popup-window.css);
@import url(css/Module/search.css);

/* 前導動畫 loading */
@import url(css/Home/loading-animation.css);


/* ==========================================================================
   靜睿設計所 (Jingrui Design Core) 設計系統變數 - 方案 A
   ========================================================================== */
:root {
  /* 邦盛開發集團 CIS 企業識別專屬配色：尊榮酒紅系列 */
  --jds-primary: #7b0107;
  --jds-primary-hover: #af4247;
  --jds-secondary: #200002;
  --jds-bg-main: #f8fafc;
  --jds-bg-card: #ffffff;
  --jds-border: #e2e8f0;
  --jds-text-dark: #1e293b;
  --jds-text-main: #334155;
  --jds-text-muted: #64748b;
}

/* 1. 極致深色主題 */
body.theme-dark {
  --jds-bg-main: #0f172a;
  --jds-bg-card: #1e293b;
  --jds-border: #334155;
  --jds-text-dark: #f8fafc;
  --jds-text-main: #cbd5e1;
  --jds-text-muted: #94a3b8;
  --jds-primary: #8b5cf6;
  --jds-primary-hover: #a78bfa;
}

/* 2. 溫暖暖色主題 */
body.theme-warm {
  --jds-bg-main: #fdfbf7;
  --jds-bg-card: #fffbeb;
  --jds-border: #fde68a;
  --jds-text-dark: #451a03;
  --jds-text-main: #78350f;
  --jds-text-muted: #b45309;
  --jds-primary: #d97706;
  --jds-primary-hover: #fbbf24;
}

/* ==========================================================================
   全站基礎樣式（保持 Astra 自訂器相容性，不強制覆寫主選單與全站底色）
   ========================================================================== */
/* 注意：勿強行覆寫 --ast-global-color-* 與 body 背景色，以確保 Astra 自訂器(Customizer)控制之主選單與全站底色正常呈顯 */
h1, h2, h3, h4, h5, h6 {
  color: var(--jds-text-dark);
}

a {
  color: var(--jds-primary);
  transition: color 0.2s ease;
}

a:hover, a:focus {
  color: var(--jds-primary-hover);
}



/* ==========================================================================
   TablePress 表格欄位統一樣式初始化
   ========================================================================== */
/*前台表格顯示時，關閉上下篩選器及搜尋功能*/
.dt-container .dt-layout-row {
  display: none;
}

/*前台表格顯示*/
.dt-container .dt-layout-row.dt-layout-table {
  display: flex;
}

/* ===== TablePress + DataTables 整體美化 ===== */

.dt-container .tablepress {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap;
}

.dt-container .tablepress thead th {
  position: relative;
  /* 為了排序箭頭定位 */
  background-color: var(--jds-primary);
  color: #fff;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  font-weight: 600;
  border: 1px solid var(--jds-border);
}

/* 內文欄位 */
.dt-container .tablepress tbody td {
  text-align: center;
  vertical-align: middle;
  padding: 8px 10px;
  border: 1px solid var(--jds-border);
  background-color: var(--jds-bg-card);
  color: var(--jds-text-main);
}

/* 隔行變色 + Hover */
.dt-container .tablepress tbody tr:nth-child(even) td {
  background-color: var(--jds-bg-main);
}

.dt-container .tablepress tbody tr:hover td {
  background-color: var(--jds-border);
}

/* 響應式捲動 */
@media screen and (max-width: 1024px) {
  .dt-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dt-container .tablepress {
    min-width: 900px;
  }
}

/* ===== 排序箭頭樣式（黑底白字風格） ===== */

/* 箭頭容器位置 */
.dt-container .tablepress thead .dt-column-order {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 12px;
  opacity: 0.6;
  cursor: pointer;
}

/* 預設顯示上下箭頭 */
.dt-container .tablepress thead .dt-column-order:before,
.dt-container .tablepress thead .dt-column-order:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  opacity: 0.3;
}

/* 上箭頭 */
.dt-container .tablepress thead .dt-column-order:before {
  border-bottom: 6px solid #ffffff;
  margin-bottom: 2px;
}

/* 下箭頭 */
.dt-container .tablepress thead .dt-column-order:after {
  border-top: 6px solid #ffffff;
}

/* 啟用排序樣式強化 */
.dt-container .tablepress thead .dt-ordering-asc .dt-column-order:before,
.dt-container .tablepress thead .dt-ordering-desc .dt-column-order:after {
  opacity: 1;
}

/* 滑入表頭變色（含排序欄位） */
.dt-container .tablepress thead th.dt-orderable-asc:hover,
.dt-container .tablepress thead th.dt-orderable-desc:hover,
.dt-container .tablepress thead th.dt-ordering-asc,
.dt-container .tablepress thead th.dt-ordering-desc {
  background-color: var(--jds-primary-hover);
  color: #fff;
}

/* 滑入表頭時，箭頭透明度變高 */
.dt-container .tablepress thead th.dt-orderable-asc:hover .dt-column-order:before,
.dt-container .tablepress thead th.dt-orderable-asc:hover .dt-column-order:after,
.dt-container .tablepress thead th.dt-orderable-desc:hover .dt-column-order:before,
.dt-container .tablepress thead th.dt-orderable-desc:hover .dt-column-order:after {
  opacity: 0.6;
}

/* 排序中的欄位箭頭也加強顯示 */
.dt-container .tablepress thead th.dt-ordering-asc .dt-column-order:before,
.dt-container .tablepress thead th.dt-ordering-desc .dt-column-order:after {
  opacity: 1;
}


/* ==========================================================================
   WooCommerce 表單欄位統一樣式初始化
   ========================================================================== */

/* 對商品數量欄位進行獨立設計 */
.woocommerce .quantity .qty {
  height: auto !important;
  min-height: unset !important;
  line-height: 1.4 !important;
  padding: 0.4rem 0.6rem !important;
  font-size: 15px !important;
  border: 1px solid var(--jds-border) !important;
  border-radius: 0 !important;
  width: 60px !important;
  text-align: center;
  background-color: var(--jds-bg-card) !important;
  color: var(--jds-text-main) !important;
  appearance: textfield;
}

/* 移除上下箭頭（數字 input 預設 UI） */
.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* +/- 按鈕基本設計 */
.woocommerce .quantity .plus,
.woocommerce .quantity .minus {
  padding: 5px 0 5px;
  font-size: 1em;
  font-weight: bold;
  color: var(--jds-text-main) !important;
  border: 1px solid var(--jds-border) !important;
  background-color: var(--jds-bg-main) !important;
  /* border-radius: 4px; */
  user-select: none;
  line-height: 1.4;
}

/* 間距微調 */
.woocommerce .quantity.buttons_added {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   全站輸入欄位統一樣式（含 WooCommerce / Select2）
========================================================================== */

/* 所有輸入框與選單欄位 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea {
  height: 50px !important;
  min-height: 50px !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--jds-border) !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  background-color: var(--jds-bg-card) !important;
  color: var(--jds-text-main) !important;
  appearance: none !important;
  width: 100%;
}

/* Textarea 特例：可多行但高度統一起始值 */
textarea {
  height: auto !important;
  min-height: 120px !important;
  resize: vertical;
}

/* ==========================================================================
   初始化浮動標籤樣式
========================================================================== */
body:not(.cartflows-canvas):not(.cartflows-default) .woocommerce form .form-row.ast-animate-input label:not(.checkbox):not(.woocommerce-form__label-for-checkbox) {
  position: absolute;
  top: 9px;
  left: 15px;
  background: var(--jds-bg-card) !important;
  padding: 0 0.4em;
  font-size: 13px;
  color: var(--jds-text-muted) !important;
  z-index: 2;
  opacity: 1;
  pointer-events: none;
  transition: all 0.2s ease;
}

/* 輸入框容器需加 padding-top 讓 label 有空間 */
body:not(.cartflows-canvas):not(.cartflows-default) .woocommerce form .form-row.ast-animate-input {
  position: relative;
  padding-top: 1.5rem;
}

/* 修正錯位的 select */
body:not(.cartflows-canvas):not(.cartflows-default) .woocommerce form .form-row.ast-animate-input select {
  line-height: 1.5;
}

/* 小尺寸裝置支援 */
@media (max-width: 768px) {
  body:not(.cartflows-canvas):not(.cartflows-default) .woocommerce form .form-row.ast-animate-input label {
    font-size: 12px;
  }
}



/* ==========================================================================
   鄉鎮縣市下拉選單的優化
========================================================================== */
/* Select 與 Select2：右側箭頭控制 */
select,
.select2-container .select2-selection--single {
  background-position-x: calc(100% - 12px) !important;
  background-position-y: center !important;
  background-size: 12px !important;
  background-repeat: no-repeat !important;
  padding-right: 2.5rem !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--jds-border) !important;
  background-color: var(--jds-bg-card) !important;
  color: var(--jds-text-main) !important;
}

/* 修正 Select2 選單內文字垂直對齊錯誤 */
.select2-container--default .select2-selection--single {
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid var(--jds-border) !important;
  background-color: var(--jds-bg-card) !important;
  color: var(--jds-text-main) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 1rem !important;
  padding-right: 2rem !important;
  font-size: 16px !important;
  line-height: normal !important;
  height: auto !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  color: var(--jds-text-main) !important;
}

/* 小裝置補強 */
@media (max-width: 768px) {

  input,
  textarea,
  select,
  .select2-container .select2-selection--single {
    font-size: 15px !important;
    padding: 0.7rem 1rem !important;
    height: 50px !important;
    min-height: 50px !important;
  }
}




/* ==========================================================================
   WooCommerce 三欄欄位（郵遞區號／縣市／鄉鎮）響應式排列
========================================================================== */

/* 桌機與平板以上：三欄併排 */
@media (min-width: 769px) {

  #billing_postcode_field,
  #billing_state_field,
  #billing_city_field,
  #shipping_postcode_field,
  #shipping_state_field,
  #shipping_city_field {
    float: left;
    width: 33.3333%;
    padding-right: 1rem;
    box-sizing: border-box;
    clear: none;
  }

  /* 移除最後一欄的右 padding，避免超寬 */
  #billing_city_field,
  #shipping_city_field {
    padding-right: 0;
  }
}

/* 行動裝置：欄位改為垂直堆疊 */
@media (max-width: 768px) {

  #billing_postcode_field,
  #billing_state_field,
  #billing_city_field,
  #shipping_postcode_field,
  #shipping_state_field,
  #shipping_city_field {
    float: none !important;
    width: 100% !important;
    padding-right: 0 !important;
    clear: both;
  }
}

/* ==========================================================================
   檢核按鈕 Checkbox 樣式初始化（WooCommerce / 表單共用）
========================================================================== */

/* 統一 checkbox 外觀與可點擊範圍 */
.woocommerce-form__label-for-checkbox,
.woocommerce-form__label.checkbox,
.woocommerce-checkout .form-row .woocommerce-form__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 15px;
  line-height: 1.6;
  color: var(--jds-text-main) !important;
  cursor: pointer;
  margin-bottom: 1rem;
}

/* 美化 checkbox 勾選框 */
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--jds-primary) !important;
  /* 可自訂品牌色 */
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
}

/* checkbox 與文字之間的空間（防止靠太近） */
.woocommerce input[type="checkbox"]+span,
.woocommerce label>span {
  margin-left: 0.4rem;
  display: inline-block;
}

/* 補強小裝置觸控點 */
@media (max-width: 768px) {
  .woocommerce-form__label-for-checkbox {
    font-size: 14px;
  }

  input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
}


/* ==============================================================================
 * Project: 邦盛開發集團組織架構圖 - WP萬用樣版優化版 (WP Org Chart Template)
 * Author: Ray Shih (施睿皇) - Jingrui Design Studio
 * ============================================================================== */
#wp-custom-org-chart {
    --primary-color: var(--jds-primary, #7b0107);
    --secondary-color: var(--jds-secondary, #200002);
    --accent-color: var(--jds-primary-hover, #af4247);
    --node-bg: var(--jds-bg-card, #ffffff);
    --text-color: var(--jds-text-dark, #333333);
    --line-color: var(--jds-border, #edf0f7);
    
    width: 100%;
    overflow-x: auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    box-sizing: border-box;
    display: block;
}

#wp-custom-org-chart * { box-sizing: border-box; }
#wp-custom-org-chart .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

#wp-custom-org-chart .tree {
    width: max-content;
    min-width: 100%;
    margin: 0 auto;
    padding-bottom: 15px;
}

#wp-custom-org-chart .tree ul { padding-top: 20px; position: relative; transition: all 0.5s; display: flex; justify-content: center; padding-left: 0; margin: 0; }
#wp-custom-org-chart .tree li { float: left; text-align: center; list-style-type: none; position: relative; padding: 20px 4px 0 4px; transition: all 0.5s; }

#wp-custom-org-chart .tree li::before, #wp-custom-org-chart .tree li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid var(--line-color); width: 50%; height: 20px; z-index: 1; }
#wp-custom-org-chart .tree li::after { right: auto; left: 50%; border-left: 2px solid var(--line-color); }
#wp-custom-org-chart .tree li:only-child::after, #wp-custom-org-chart .tree li:only-child::before { display: none; }
#wp-custom-org-chart .tree li:only-child { padding-top: 0; }
#wp-custom-org-chart .tree li:first-child::before, #wp-custom-org-chart .tree li:last-child::after { border: 0 none; }
#wp-custom-org-chart .tree li:first-child::after { border-radius: 5px 0 0 0; }
#wp-custom-org-chart .tree li:last-child::before { border-right: 2px solid var(--line-color); border-radius: 0 5px 0 0; }
#wp-custom-org-chart .tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid var(--line-color); width: 0; height: 20px; }

#wp-custom-org-chart .tree li a { border: 1px solid var(--line-color); padding: 12px 18px; text-decoration: none; color: var(--text-color); font-size: 14px; font-weight: 600; display: inline-block; border-radius: 6px; background-color: var(--node-bg); box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: all 0.3s ease; position: relative; z-index: 2; white-space: nowrap; }

#wp-custom-org-chart .tree li a.node-level-1 { background-color: var(--primary-color); color: var(--node-bg); font-size: 18px; border: none; }
#wp-custom-org-chart .tree li a.node-level-2 { background-color: var(--secondary-color); color: var(--node-bg); font-size: 16px; border: none; }
#wp-custom-org-chart .tree li a.node-level-3 { background-color: var(--accent-color); color: var(--node-bg); border: none; }

#wp-custom-org-chart .tree li a:hover, #wp-custom-org-chart .tree li a:hover+ul li a { background: var(--accent-color); color: var(--node-bg); border-color: var(--accent-color); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(230,126,34,0.2); }
#wp-custom-org-chart .tree li:has(a:hover) > a { background-color: var(--accent-color); color: var(--node-bg); border-color: var(--accent-color); }

#wp-custom-org-chart .animate-node {
    opacity: 0; 
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
    animation: fadeInUp 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
    animation-delay: var(--delay, 0s);
}

#wp-custom-org-chart::-webkit-scrollbar { height: 6px; }
#wp-custom-org-chart::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); border-radius: 10px; }
#wp-custom-org-chart::-webkit-scrollbar-thumb { background: var(--line-color); border-radius: 10px; }
#wp-custom-org-chart::-webkit-scrollbar-thumb:hover { background: var(--secondary-color); }

@media screen and (max-width: 992px) {
    #wp-custom-org-chart .tree { width: 100%; }
    #wp-custom-org-chart .tree ul { display: block; padding-top: 10px; padding-left: 20px; }
    #wp-custom-org-chart .tree > ul { padding-left: 0; }
    #wp-custom-org-chart .tree li { float: none; text-align: left; padding: 10px 0 0 20px; position: relative; }
    #wp-custom-org-chart .tree li::before, #wp-custom-org-chart .tree li::after, #wp-custom-org-chart .tree ul ul::before { display: none; }
    #wp-custom-org-chart .tree ul ul { border-left: 2px solid var(--line-color); margin-left: 15px; }
    #wp-custom-org-chart .tree ul ul > li::before { content: ''; display: block; position: absolute; top: 28px; left: 0; width: 15px; border-top: 2px solid var(--line-color); z-index: 0; }
    #wp-custom-org-chart .tree li a { display: block; width: 100%; max-width: 250px; margin-bottom: 2px; white-space: normal; }
    #wp-custom-org-chart .tree ul ul:last-child { padding-bottom: 0; }
}


/* ==========================================================================
   Astra 主選單 Header 底圖相容性宣告 (主題根目錄層級)
   ========================================================================== */
.ast-primary-header-bar.main-header-bar {
    position: relative !important;
    background-image: url('images/header_make.png'), url('images/header/header_make.png') !important;
    background-repeat: no-repeat !important;
    background-position: left bottom !important;
    background-size: contain !important;
    z-index: 1 !important;
}

.site-primary-header-wrap {
    position: relative !important;
    z-index: 2 !important;
}

@media (max-width: 921px) {
    .ast-primary-header-bar.main-header-bar {
        background-image: none !important;
    }
}