@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
@import url("/style.css");

/* ============================
   基礎 + 背景
============================ */
:root{
  --bg:#06080c;
  --card:#0b0e14;
  --line:#1b2230;
  --txt:#d9e8ff;
  --muted:#9ecbff;
  --accent:#29baff;
  --accent2:#0066ff;
  --danger:#ff4d6d;
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  font-family:'Share Tech Mono', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans TC', sans-serif;
  color:var(--txt);
  background: radial-gradient(circle at 20% 0%, #0b0d13, var(--bg) 70%);
  text-align:center;
}

.hidden{ display:none !important }

/* 星空背景 */
#bg{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:-1;
  background:
    radial-gradient(1200px 800px at 10% -10%, #0b1530 0%, transparent 60%),
    radial-gradient(1200px 800px at 110% 10%, #061a35 0%, transparent 60%);
}

/* 頁面布局 */
.astrail-topup-bg{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4vh 1rem;
  background:var(--bg);
}

/* ============================
   外框（主卡片）
============================ */
.topup-wrapper{
  width:100%;
  display:flex;
  justify-content:center;
}

.topup-card{
  background:linear-gradient(145deg,#070a11,#0b0f19);
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:0 0 28px rgba(0,102,255,.25);
  padding:1.8rem 1.6rem 1.7rem;
  width:min(520px,96vw);
  color:var(--txt);
  text-align:left;
}

/* ============================
   Header
============================ */
.topup-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:1.1rem;
}

.topup-header h1{
  margin:0;
  font-size:1.35rem;
  color:var(--accent);
}

.topup-user{
  font-size:.85rem;
  color:var(--muted);
  text-align:right;
}

/* ============================
   區塊
============================ */
.topup-section{
  margin-bottom:1.1rem;
}

.topup-label{
  font-size:.9rem;
  margin-bottom:.3rem;
  color:var(--muted);
}

/* ============================
   儲值方式選擇
============================ */
.topup-methods{
  display:flex;
  flex-direction:column;
  gap:.45rem;
  text-align:left; /* ⭐ 強制靠左 */
}

.topup-method-item{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  padding:.5rem .7rem;
  border-radius:10px;
  background:#070b12;
  border:1px solid var(--line);
  cursor:pointer;
}

.topup-method-item:hover{
  border-color:var(--accent2);
  background:#09101c;
}

.topup-method-item input[type="radio"]{
  accent-color:var(--accent2);
}

.m-title{ font-size:.92rem }
.m-sub{
  font-size:.78rem;
  color:#7fa7e3;
}

/* ============================
   輸入框
============================ */
.topup-input{
  width:100%;
  max-width:260px;
  padding:.6rem .75rem;
  border-radius:10px;
  border:1px solid var(--line);
  background:#050911;
  color:var(--txt);
  font-size:1rem;
}

.topup-input:focus{
  outline:none;
  border-color:var(--accent2);
  box-shadow:0 0 0 1px rgba(0,102,255,.55);
}

.topup-hint{
  margin-top:.4rem;
  font-size:.78rem;
  color:#86a9e6;
}

/* ============================
   訊息提示
============================ */
.topup-msg{
  margin-top:1rem;
  min-height:1.2em;
  font-size:.88rem;
  color:var(--muted);
}

/* ============================
   訂單資訊
============================ */
.topup-order-info{
  padding:.7rem .8rem;
  border-radius:10px;
  background:#070b12;
  border:1px solid var(--line);
  font-size:.9rem;
}

.info-row{ margin:.15rem 0 }
.info-row span{ color:var(--accent) }

.topup-countdown{
  margin-top:.8rem;
  font-weight:700;
  font-size:.95rem;
  color:var(--accent);
}

/* ============================
   操作區
============================ */
.topup-actions{
  margin-top:1rem;
}

.topup-box{
  padding:.8rem .9rem;
  border-radius:12px;
  background:#050910;
  border:1px solid var(--line);
  font-size:.88rem;
}

.topup-box p{ margin:.25rem 0 }

/* 底部按鈕 */
.topup-footer-btns{
  margin-top:1.2rem;
  display:flex;
  justify-content:flex-end;
  gap:.6rem;
}

/* ============================
   小螢幕
============================ */
@media (max-width:600px){
  .topup-card{
    padding:1.4rem 1.2rem 1.5rem;
  }
  .topup-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .topup-user{
    text-align:left;
  }
}
/* 下方「建立儲值單」按鈕 - Astrail 標準藍光風格 */
.topup-submit-btn{
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  border:0;
  color:#fff;
  padding:.65rem 1.2rem;
  border-radius:12px;
  font-size:.92rem;
  font-weight:700;
  box-shadow:0 0 12px rgba(0,102,255,.35);
  transition:transform .15s, box-shadow .15s, filter .15s;
  margin-top:1rem;
}

.topup-submit-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 18px rgba(0,102,255,.55);
}

.topup-submit-btn:active{
  transform:scale(.96);
  filter:brightness(.85);
}
/* ===== 訂單頁底部按鈕（Astrail 藍光版） ===== */

.order-btn{
  padding:.55rem 1.2rem;
  font-size:.88rem;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  transition: all .18s ease;
}

/* 取消訂單（灰框幽靈按鈕） */
.order-btn.cancel{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  color:var(--muted);
}
.order-btn.cancel:hover{
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:0 0 10px rgba(0,140,255,.25);
}

/* 返回首頁（藍光主按鈕） */
.order-btn.back{
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  border:0;
  color:#fff;
  box-shadow:0 0 12px rgba(0,102,255,.35);
}
.order-btn.back:hover{
  transform:translateY(-1px);
  box-shadow:0 0 20px rgba(0,102,255,.55);
}
.order-btn.back:active{
  transform:scale(.95);
  filter:brightness(.85);
}

/* 排版 */
.order-btn-row{
  display:flex;
  justify-content:flex-end;
  gap:.6rem;
  margin-top:1.4rem;
}
/* ===== 檔案上傳區（Astrail Edition） ===== */

.file-upload-wrap{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-top:.6rem;
  flex-wrap:wrap;
}

/* 隱藏醜爆的原生 input */
.file-input{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  border:0;
  clip:rect(0,0,0,0);
}

/* 「選擇檔案」按鈕 */
.file-btn{
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  color:#fff;
  padding:.55rem 1.1rem;
  border-radius:10px;
  font-size:.88rem;
  font-weight:700;
  cursor:pointer;
  border:0;
  box-shadow:0 0 12px rgba(0,102,255,.32);
  transition:all .18s;
  white-space:nowrap;
}
.file-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 20px rgba(0,102,255,.55);
}
.file-btn:active{
  transform:scale(.95);
  filter:brightness(.85);
}

/* 顯示檔名 */
.file-name{
  font-size:.85rem;
  color:var(--muted);
  min-width:150px;
}

/* 「上傳明細」按鈕 */
.upload-btn{
  background:#0f2948;
  color:#d9e8ff;
  padding:.55rem 1.1rem;
  border-radius:10px;
  font-size:.88rem;
  font-weight:700;
  border:1px solid #184d8a;
  cursor:pointer;
  transition:.18s;
}
.upload-btn:hover{
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 0 12px rgba(0,102,255,.35);
}
.upload-btn:active{
  transform:scale(.95);
}
/* ===== Astrail 檔案上傳 UI ===== */
.file-upload-wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  margin-top:.6rem;
}

/* 隱藏掉原生 input */
.file-input{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  border:0;
  clip:rect(0,0,0,0);
}

/* 選擇檔案 */
.file-btn{
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  color:#fff;
  padding:.55rem 1.1rem;
  border-radius:10px;
  font-size:.88rem;
  font-weight:700;
  cursor:pointer;
  border:0;
  box-shadow:0 0 12px rgba(0,102,255,.32);
  transition:all .18s;
  white-space:nowrap;
}
.file-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 20px rgba(0,102,255,.55);
}

/* 顯示檔名 */
.file-name{
  font-size:.85rem;
  color:var(--muted);
  min-width:150px;
}

/* 上傳按鈕 */
.upload-btn{
  background:#0f2948;
  color:#d9e8ff;
  padding:.55rem 1.1rem;
  border-radius:10px;
  font-size:.88rem;
  font-weight:700;
  border:1px solid #184d8a;
  cursor:pointer;
}
.upload-btn:hover{
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 0 12px rgba(0,102,255,.35);
}
/* 轉帳用的「送出末五碼」按鈕 */
#last5-btn{
  width:100%;
  margin-top:.8rem;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  border:0;
  color:#fff;
  padding:.6rem 1.1rem;
  border-radius:10px;
  font-size:.9rem;
  font-weight:700;
  box-shadow:0 0 12px rgba(0,102,255,.35);
  cursor:pointer;
  transition:transform .15s, box-shadow .15s, filter .15s;
}

#last5-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 0 18px rgba(0,102,255,.55);
}

#last5-btn:active{
  transform:scale(.96);
  filter:brightness(.85);
}
.topup-quota{
  margin-top:.35rem;
  font-size:.78rem;
  color:#ffd27f;
}
/* 銀行選單外框 */
.bank-select-wrap {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.9rem;
}

/* 標題 */
.bank-select-label {
  opacity: 0.9;
}

/* 下拉選單本體 */
.topup-select {
  width: 100%;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(15, 20, 35, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #f8f8ff;
  outline: none;
  font-size: 0.95rem;

  /* 拿掉原生醜醜箭頭 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* 讓文字跟 placeholder 對齊你其他 input 風格 */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* hover 跟 focus 效果 */
.topup-select:hover {
  box-shadow: 0 0 12px rgba(124, 179, 255, 0.35);
}

.topup-select:focus {
  box-shadow: 0 0 0 1px rgba(124, 179, 255, 0.8);
}

/* 下方帳戶資訊 */
.bank-detail {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.95;
}

/* 手機版稍微縮一下字 */
@media (max-width: 600px) {
  .topup-select {
    font-size: 0.85rem;
    padding: 0.5rem 0.8rem;
  }
}