/* iGPU.tw — 站台專屬覆寫
   基底是 Finder (Bootstrap 5) theme.min.css，這裡只放 igpu 自己的調整。
   20260912 */

/* 導覽列品牌 */
.navbar-brand { color: #fff !important; text-decoration: none; }
.navbar-brand:hover { color: #fff !important; }

/* 讓 sticky navbar 下的 hero 不要貼太緊 */
.main-wrapper { min-height: 60vh; }

/* 規格表：價格欄不換行 */
table td.text-success { white-space: nowrap; }

/* footer 連結 hover */
.footer .nav-link:hover { color: var(--fn-primary) !important; }

/* 首頁 hero 的兩顆 CTA 按鈕：手機版縮小字級/padding 讓它們擠得進同一行，不要被 Bootstrap
   navbar 那種 flex-wrap 換行——桌機版(≥576px)維持原本 btn-lg 的大小 */
@media (max-width: 575.98px) {
  .hero-cta { gap: .4rem !important; }
  .hero-cta .btn.btn-lg {
    font-size: .78rem;
    padding: .45rem .55rem;
    white-space: nowrap;
  }
  .hero-cta .btn i { margin-right: .3rem !important; }
}

/* 首頁「可租規格」卡片：hover 微浮起，跟其餘 card 區塊(怎麼用)手感一致 */
.spec-card { transition: transform .15s ease, box-shadow .15s ease; }
.spec-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.1) !important; }

/* 規格卡左上角狀態圓點 + 右上角 Live 徽章（跟進 GPUtw.ai 卡片視覺） */
.spec-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; }
.spec-dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; flex-shrink: 0; }
/* 顏色用 Finder 主題的 --fn-* 變數（theme.min.css 沒有定義 --bs-success 那組，2026-09-23 圓點因此透明），並給 hex 後備 */
.spec-dot-available { background: var(--fn-success, #33b36b); }
.spec-dot-limited   { background: var(--fn-warning, #fc9231); }
.spec-dot-soldout    { background: var(--fn-secondary, #6c727f); }
.spec-dot-custom     { background: var(--fn-info, #3d7a81); }
.spec-dot-preparing  { background: var(--fn-secondary, #6c727f); }
.spec-live-badge { background: rgba(25,135,84,.15); color: var(--fn-success); border: 1px solid rgba(25,135,84,.3); font-weight: 600; }

/* 購買點數頁：面額大字顯示框 + 面額卡片選取態 */
.topup-display #topup-display-num { line-height: 1.1; }

/* 金額顯示框改成可直接輸入的 input（不再是唯讀文字），拿掉外框讓它融進深色底，
   數字放大成跟原本純文字顯示一樣的視覺份量；順手把瀏覽器原生的上下箭頭關掉，
   卡片式面額按鈕已經有等同功能，箭頭放旁邊反而顯得多餘。 */
.topup-amount-input {
  background: transparent; border: 0; outline: 0; box-shadow: none;
  text-align: center; font-size: 2.5rem; font-weight: 700; line-height: 1.1;
  width: auto; max-width: 220px; color: inherit;
  -moz-appearance: textfield;
}
.topup-amount-input::-webkit-outer-spin-button,
.topup-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.topup-unit-label { font-size: 1.1rem; color: var(--fn-secondary-color, rgba(0,0,0,.6)); }
.topup-chip.btn-primary { box-shadow: 0 0 0 .2rem rgba(var(--fn-primary-rgb), .15); }

/* 首頁「熱門工作環境」卡片的小方塊 icon 底 */
.tmpl-icon {
  width: 42px; height: 42px; border-radius: .5rem;
  background: rgba(var(--fn-primary-rgb), .15);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; color: var(--fn-primary); flex-shrink: 0;
}

/* /templates 頁面是全頁深色（跟首頁 hero 同一種深色），主題本身的 theme.min.css
   沒有針對 data-bs-theme="dark" 自動處理卡片底色，這裡補一個通用覆寫 */
[data-bs-theme="dark"] .card { background: #12141b; border-color: rgba(255,255,255,.08); }

/* 環境範本目錄頁：分類總覽卡（大張）依分類色調給頂部色條 + 淡淡的漸層底色 */
.tmpl-hero-card { border-top: 3px solid transparent !important; }
.tmpl-hero-warning   { border-top-color: var(--fn-warning, #fc9231) !important;   background: linear-gradient(180deg, rgba(var(--fn-warning-rgb), .1), transparent 60%); }
.tmpl-hero-info      { border-top-color: var(--fn-info) !important;      background: linear-gradient(180deg, rgba(var(--fn-info-rgb), .1), transparent 60%); }
.tmpl-hero-primary   { border-top-color: var(--fn-primary) !important;   background: linear-gradient(180deg, rgba(var(--fn-primary-rgb), .1), transparent 60%); }
.tmpl-hero-secondary { border-top-color: var(--fn-secondary) !important; background: linear-gradient(180deg, rgba(var(--fn-secondary-rgb), .1), transparent 60%); }
.tmpl-icon.tmpl-icon-lg { width: 56px; height: 56px; font-size: 1.4rem; }

/* 規格卡狀態列的 icon（「準備中」用時鐘，取代原本的彩色圓點） */
.spec-status-icon { font-size: .85rem; opacity: .8; }

/* 首頁 hero 的三個關鍵重點方塊（仿 GPUtw 的 stat boxes，但放我們真的做得到的事） */
.hero-stat {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .75rem;
  padding: 1.1rem .9rem;
  height: 100%;
}
.hero-stat-num { font-size: 1.6rem; line-height: 1; color: var(--fn-primary); margin-bottom: .5rem; }