/**
 * Theme Name: Jingrui Design Core
 * Author: 靜睿設計所 施睿皇 Ray
 * Author URI: https://ray-shi.jingruidesign.com/
 * Description: 本專案為 靜睿設計所 (Jingrui Design Studio) 獨家構建的企業級 WordPress 子主題架構，旨在為所有客戶專案奠定堅實的數位地基。作為驅動網站的核心引擎，本系統深度整合了高規格的安全性防護、SEO 結構優化與極致的載入效能。我們透過標準化的開發邏輯，有效解決父主題更新可能帶來的兼容性風險，確保長期運維的穩定性與擴充彈性。這不僅是一套程式碼，更是靜睿設計所貫徹「慢構」精神，將設計美學與技術工藝完美結合，對每一份交付品質的絕對承諾。
 * Version: 3.2.0
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: jingrui-design-core
 * Template: astra
 * Last Updated: 2026-07-07
 * Copyright: Copyright (c) 2026 靜睿設計所 Jingrui Design Studio. All rights reserved.
 */


@charset "UTF-8";

/* ==========================================================================
   靜睿設計所 (Jingrui Design Core) 設計系統變數 - 方案 A
   ========================================================================== */
:root {
  /* 預設配色：優雅藍/靛藍系列 */
  --jds-primary: #4f46e5;
  --jds-primary-hover: #6366f1;
  --jds-secondary: #0f172a;
  --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 變數綁定（配合配色切換）
   ========================================================================== */
body {
  /* 注入並覆寫 Astra 原生變數，使前台元件無縫繼承配色，避免 !important 破壞佈局 */
  --ast-global-color-0: var(--jds-primary);       /* 品牌主色 */
  --ast-global-color-1: var(--jds-primary-hover); /* 品牌主色 Hover */
  --ast-global-color-2: var(--jds-text-dark);     /* 標題與粗體字 */
  --ast-global-color-3: var(--jds-text-main);     /* 內文主色 */
  --ast-global-color-4: var(--jds-border);        /* 邊框 / 分隔線 */
  --ast-global-color-5: var(--jds-bg-card);       /* 內容區塊背景 / 卡片背景 */
  --ast-global-color-6: var(--jds-bg-main);       /* 網站總背景色 */

  background-color: var(--jds-bg-main);
  color: var(--jds-text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
}

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);
}

/* 模組區塊「各單元」 */
@import url(css/home.css);
@import url(css/about.css);
@import url(css/news.css);
/*@import url(css/blog.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);

/*銷售王者組合開啟的話，會影響到側邊的浮動按鈕座標，兩個只能二選一*/

/* 客製化單一商品頁面(需要搭配 shopping_related.php 內的開關) */
/* @import url(css/single-shop.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);

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

/* 追加美編頁面 */
/* @import url(css/edit-style.css); */


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