/* ===== a111.css — 歷史充值（四行：流水號 / 時間 / 金額 / Tx） ===== */

/* Tabs（充值 / 歷史充值） */
.a11-tabs{
  display:flex; gap:16px; justify-content:center; align-items:center;
  margin:0 0 6px;
}
.a11-tab-btn{
  background:transparent; color:#bbb; border:none; cursor:pointer;
  padding:6px 10px; font-size:14px; position:relative;
}
.a11-tab-btn.active{ color:#0ff; text-shadow:0 0 6px #0ff; }
.a11-tab-btn.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background:linear-gradient(90deg,#0ff,#f0f,#0ff); border-radius:3px;
}

/* 歷史面板容器 */
#recharge-history{ padding-top:6px; }
/* 大標題置中（支援自訂 #a11-his-title） */
#recharge-history .modal-title,
#a11-his-title{
  margin:6px 0 10px;
  text-align:center;
  display:block; width:100%;
  margin-left:auto; margin-right:auto;
  padding:0;
}

/* 大標題兩行：第二行（數字+幣別） */
#a11-his-title .a111-amt-num{ display:block; margin-top:2px; }
/* 舊版若還有單獨幣別元素也不影響 */
#a11-his-title .a111-amt-sym{ display:block; margin-top:2px; }

/* 列表容器 */
#a11-history-list{
  max-height:calc(70vh - 160px);
  overflow-y:auto; overflow-x:hidden;
  margin:0; padding:0; list-style:none;
  border-top:1px solid rgba(255,255,255,.1);
}

/* 卡片（垂直多行） */
#a11-history-list li{
  position:relative;
  padding:12px 14px; margin:8px 0;
  background:rgba(20,20,50,.85);
  border-left:4px solid #08f; border-radius:6px;
  color:#ddd; font-family:monospace;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}

/* 每一行：左 label / 右 value */
.a111-row{
  display:flex;
  justify-content:space-between;
  align-items:center;              /* ★ 由 baseline 改為垂直置中 */
  gap:12px;
}
.a111-row + .a111-row{
  margin-top:6px; padding-top:6px;
  border-top:1px dashed rgba(255,255,255,.12);
}
.a111-k{
  color:#0ff; text-shadow:0 0 4px rgba(0,255,255,.6);
  font-weight:700; min-width:64px; /* 讓四個標籤對齊 */
}
.a111-v{
  color:#fff; flex:1; text-align:right;
}
.a111-tx{ color:#f0f; text-shadow:0 0 6px #f0f; white-space:nowrap; }

/* 第二行（時間）字級微調 */
#a11-history-list .a111-row:nth-child(2) .a111-v{
  font-size:.95em;
}

/* ★ 做法 A：時間兩行直向，並在列中垂直置中、右對齊 */
.a111-v-datetime{
  display:inline-flex;             /* span → inline-flex */
  flex-direction:column;           /* 日期在上、時間在下 */
  justify-content:center;          /* 在父列垂直置中 */
  align-items:flex-end;            /* 右對齊，與其它數字一致 */
  line-height:1.15;
  min-height:2.2em;                /* 兩行的最小高度，可依字型微調 */
}
.a111-v-datetime .a111-date{ display:block; }
.a111-v-datetime .a111-time{ display:block; margin-top:2px; }

/* 錯誤訊息與 More 按鈕 */
#a11-his-error{ color:#ff9; text-align:center; margin-top:6px; }
#a11-more{ text-align:center; margin-top:8px; }
#a11-more .a11-btn{
  background:transparent; border:1px solid rgba(0,255,255,.6);
  padding:6px 12px; border-radius:8px; cursor:pointer; color:#fff;
}

/* 小螢幕：允許 value 換行，仍保持置中對齊 */
@media (max-width:420px){
  .a111-row{ align-items:center; }     /* 仍維持置中 */
  .a111-v{ word-break:break-all; }
}