/* 
   Northeast Propulsion - Modern UI/UX Design System 
   Version: 2.0 (Global Refactor)
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

:root {
  /* =========================================
       1. 核心品牌色 (Brand Colors)
       ========================================= */
  /* 主色：活力橙紅 (用於按鈕、行動呼籲、重點標示) */
  --primary-color: #ff5722;
  --primary-hover: #e64a19; /* 深一點的橙紅 */
  --primary-light: #ffccbc; /* 淺橙色背景 */

  /* 輔助色：深岩海藍 (用於 Footer、Header、文字) - 負責穩重感 */
  --secondary-color: #d47641;
  --secondary-light: #334155; /* 淺一點的深藍 */
  --secondary-bg: #f1f5f9; /* 帶藍調的淺灰背景 */

  /* =========================================
       2. 多彩動態點綴 (Colorful Accents)
       ========================================= */
  /* 科技藍 (用於連結、資訊 Info) */
  --accent-blue: #0091ea;
  --accent-blue-hover: #006064;

  /* 能源綠 (用於成功、環保、電量) */
  --accent-green: #00c853;

  /* 警示紅 (用於錯誤、熱門 HOT) */
  --accent-red: #d50000;

  /* 青色 (用於標籤、次要亮點) */
  --accent-cyan: #00bcd4;

  /* =========================================
       3. 漸層動態色 (Gradients) - 讓介面活起來的關鍵
       ========================================= */
  /* 主按鈕漸層：橙紅 -> 亮橘 */
  --grad-primary: linear-gradient(135deg, #ff5722 0%, #ff9100 100%);

  /* 科技漸層：深藍 -> 青藍 (用於 Footer 標題條或區塊背景) */
  --grad-secondary: linear-gradient(135deg, #1e293b 0%, #37474f 100%);

  /* 亮眼漸層：用於 Badges 或 ICON 背景 */
  --grad-colorful: linear-gradient(135deg, #00c853 0%, #b2ff59 100%);

  /* =========================================
       4. 基礎 UI 屬性
       ========================================= */
  --bg-body: #f8fafc; /* 極淺的灰藍白，比純白更有質感 */
  --bg-card: #ffffff;

  --text-main: #1e293b; /* 深色文字 */
  --text-muted: #64748b; /* 次要文字 */
  --border-color: #e2e8f0;

  --border-radius: 10px; /* 較圓潤的導角，現代感 */
  --border-radius-pill: 50px; /* 膠囊按鈕 */

  /* 陰影系統 (加上一點環境色，而非純黑陰影) */
  --shadow-sm: 0 1px 2px 0 rgba(30, 41, 59, 0.05);
  --shadow-md:
    0 4px 6px -1px rgba(30, 41, 59, 0.1), 0 2px 4px -1px rgba(30, 41, 59, 0.06);
  --shadow-lg:
    0 10px 15px -3px rgba(30, 41, 59, 0.1),
    0 4px 6px -2px rgba(30, 41, 59, 0.05);

  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================
   1. 基礎設定 (Reset & Typography)
   ========================================= */

body {
  /* 
       字體順序策略：
       1. 'Inter': 優先處理英文與數字 (最專業)
       2. -apple-system, BlinkMacSystemFont: Mac/iOS 系統字體 (萍方體)
       3. 'Noto Sans TC': Google 思源黑體 (涵蓋 Windows/Android 的中文)
       4. 'Microsoft JhengHei': 微軟正黑體 (作為備用，給不支援 Web Font 的舊電腦)
       5. sans-serif: 系統預設無襯線體
    */
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Noto Sans TC",
    "Microsoft JhengHei",
    "Helvetica Neue",
    Arial,
    sans-serif;

  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;

  /* 字體渲染優化 (讓字體在 Mac 上更清晰) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 針對標題 (H1-H6) 加強粗細與間距 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Inter", "Noto Sans TC", sans-serif; /* 確保標題也套用 */
  font-weight: 700;
  color: #595959;
  letter-spacing: -0.02em; /* 稍微縮緊字距，讓標題更緊湊有力 */
}

/* 針對數字與價格 (B2B 重點) - 使用 Inter 的等寬數字特性，讓表格對齊更漂亮 */
.table-specs td,
.item-price,
.cart-badge,
.stat-info h3 {
  font-feature-settings: "tnum"; /* Tabular Numbers (等寬數字) */
  font-variant-numeric: tabular-nums;
}

body {
  background-color: var(--bg-body);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden; /* 防止手機橫向滾動 */
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

.accordion-item {
  background-color: #ffffff00;
}

.text-primary {
  color: rgb(247 110 110) !important;
}

/* 容器優化 */
.container {
  max-width: 1400px;
}

/* =========================================
   2. 導覽列 (Navbar) - 智慧互動
   ========================================= */

/* =========================================
   3. 元件與卡片 (Components)
   ========================================= */
/* 按鈕 */

/* 卡片 */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  overflow: hidden;
}
.card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-color);
  transform: translateY(-5px);
}

/* 產品卡片 */
.product-card .card-img-top {
  transition: transform 0.5s ease;
}
.product-card:hover .card-img-top {
  transform: scale(1.05); /* 圖片微放大 */
}

/* =========================================
   4. 表單優化 (Forms - 針對 Contact Us)
   ========================================= */

/* =========================================
   5. 首頁區塊 (Home)
   ========================================= */
/* 輪播文字 */
.text-shadow {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* 公司資訊圓形圖示 */
.rounded-circle.bg-primary {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%) !important;
  box-shadow: 0 4px 10px rgba(230, 126, 34, 0.3);
}

/* =========================================
   7. 跨平台 RWD 優化
   ========================================= */
@media (max-width: 768px) {
  /* 手機版字體調整 */
  h1 {
    font-size: 1.75rem;
  }
  h2 {
    font-size: 1.5rem;
  }

  /* 導覽列調整 */
  .navbar {
    padding: 10px 0;
  }

  /* 表單調整 */
  .step-indicator {
    font-size: 0.8rem;
    padding: 6px 15px;
    width: 48% !important; /* 強制並排 */
  }

  /* 卡片間距 */
  .row.g-4 > div {
    margin-bottom: 15px;
  }
}

/* --- Problem 8: 垂直跑馬燈 CSS --- */
.vertical-marquee-container {
  height: 300px;
  overflow: hidden;
  position: relative;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 10px;
}
.vertical-marquee-content {
  animation: marqueeUp 20s linear infinite;
}
.marquee-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f1f1f1;
  transition: 0.2s;
}
.marquee-item:hover {
  background: #f8fafc;
}
.marquee-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid #eee;
}
@keyframes marqueeUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  } /* 需配合 JS 複製內容 */
}

@media (max-width: 991px) {
  body {
    padding-bottom: 70px; /* 預留給 Bottom Nav 的空間 */
  }
}

.btn-primary,
.btn-warning {
  background: var(--grad-primary) !important;
  border: none !important;
  color: white !important;
  box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3); /* 橙色光暈 */
}

.btn-primary:hover,
.btn-warning:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 87, 34, 0.4);
  filter: brightness(1.1); /* 變亮 */
}

/* 修改 Bootstrap 預設 Badge 顏色 */
.badge.bg-primary {
  background-color: var(--primary-color) !important;
}
.badge.bg-success {
  background-color: var(--accent-green) !important;
}
.badge.bg-info {
  background-color: var(--accent-cyan) !important;
  color: white !important;
}
.badge.bg-danger {
  background-color: var(--accent-red) !important;
}

/* 讓 Badge 也有漸層感 (選用) */
.badge {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
}

/* 讓導覽列使用深藍色，凸顯專業 */
.navbar-main {
  background: var(--secondary-color) !important;
}

/* 讓 Footer 標題下方的線條變成漸層 */
.footer-title::after {
  background: var(--grad-primary) !important;
  height: 4px !important;
  border-radius: 4px;
}

/* 連結 Hover 變為科技藍 */
.footer-link:hover,
.nav-link-custom:hover {
  color: var(--accent-cyan) !important;
}

.icon-circle {
  /* 使用主色漸層 */
  background: var(--grad-primary) !important;
  box-shadow: 0 10px 20px rgba(255, 87, 34, 0.3);
}

/* =========================================
   RWD 破版緊急修復 (Fix Layout Overflow)
   ========================================= */

/* 1. 強制限制所有內容圖片與影片寬度 */
/* 針對 Summernote 產生的內容 (.article-content) 做限制 */
.article-content img,
.article-content iframe,
.article-content video,
.article-content table {
  max-width: 100% !important; /* 強制不超過螢幕寬 */
  height: auto !important; /* 高度自動縮放，防止變形 */
  overflow-x: auto; /* 表格過寬時顯示捲軸，不要撐破版面 */
  display: block; /* 避免行內元素的奇怪間距 */
}

/* 2. 防止網頁橫向溢出 */
html,
body {
  overflow-x: hidden; /* 禁止橫向捲軸 */
  width: 100%;
  position: relative;
}

/* 3. 確保底部導覽列永遠在最上層 */
.mobile-bottom-nav {
  z-index: 9999 !important; /* 設定極高的層級，蓋過 Footer 和其他元素 */
  background-color: #ffffff; /* 確保背景不透明 */
  border-top: 1px solid #dee2e6;
  padding-bottom: env(safe-area-inset-bottom); /* 適應 iPhone 底部橫條 */
}

/* 4. 確保 Footer 不會蓋住導覽列 */
footer {
  position: relative;
  z-index: 1; /* Footer 層級要低 */
}

/* 5. 確保內文容器在手機上有適當的內距 */
@media (max-width: 768px) {
  .article-content {
    padding: 0 5px; /* 避免文字貼邊 */
    word-wrap: break-word; /* 強制長單字換行 */
    overflow-wrap: break-word;
  }
}

/* =========================================
   NEW Premium Page Header (Global Refactor)
   ========================================= */
.page-header-bg {
  background: linear-gradient(
    120deg,
    #fdfbfb 0%,
    #f1f5f9 100%
  ); /* Clean, soft light grey */
  padding: 60px 0;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

/* Decorative background flare */
.page-header-bg::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(230, 126, 34, 0.03) 0%,
    transparent 70%
  );
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.page-header-bg .container {
  position: relative;
  z-index: 1;
}

.page-header-bg h1 {
  font-family: "Inter", sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.5px;
  margin-bottom: 0.75rem;
}

.page-header-bg .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.page-header-bg .breadcrumb-item a {
  color: #94a3b8;
  text-decoration: none;
  transition: 0.2s;
}

.page-header-bg .breadcrumb-item a:hover {
  color: var(--primary-color);
}

.page-header-bg .breadcrumb-item.active {
  color: var(--primary-color);
  font-weight: 600;
}

.page-header-bg .breadcrumb-item + .breadcrumb-item::before {
  color: #cbd5e1;
  content: "›";
  font-family:
    ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; /* Elegant separator */
  font-size: 1.2rem;
  line-height: 1;
  vertical-align: text-top;
  padding: 0 8px;
}