/* static/css/a10.css - Mobile First (4 按鈕同一行) */

/* ===== 安全區 & 高度變量 ===== */
:root {
  --safe-top: env(safe-area-inset-top, 0);
  --top-buttons-height: 64px;
  --main-info-min-height: 60px;
  --bottom-buttons-height: 64px;
  --content-gap: -20px;

  /* 全站左右統一留白 */
  --side-gap: 10px;

  /* 首張宣傳圖與灰條之間的距離（可自行調整） */
  --first-section-gap: 2px;
}

/* ===== 全頁 padding ===== */
body {
  padding-top: calc(
    var(--safe-top) + var(--top-buttons-height)
      + var(--main-info-min-height) + var(--content-gap)
  );
  padding-bottom: calc(
    env(safe-area-inset-bottom, 0) + var(--bottom-buttons-height)
      + var(--content-gap)
  );
}

/* ===== 上方按鈕列 ===== */
.top-buttons {
  position: fixed;
  top: var(--safe-top);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  background: rgba(0, 0, 0, 0.4);
  height: var(--top-buttons-height);
  gap: 0.25rem;
  z-index: 1100;
  overflow: hidden;            /* 裁掉霓虹光暈 */
}
.top-buttons button.neon-btn {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
}

/* ===== 主資訊區（灰色條） ===== */
.a10-main-info {
  position: fixed;
  top: calc(var(--safe-top) + var(--top-buttons-height) - 24px);
  left: var(--side-gap);
  right: var(--side-gap);

  min-height: var(--main-info-min-height);
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  box-sizing: border-box;
  z-index: 1050;

  border-radius: 6px;
  box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.25);
}
.a10-main-info > * { margin: 0; }

/* ===== 餘額容器 ===== */
.a10-balance-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 14px;
  line-height: 1.2;
}

/* ===== 標題 ===== */
.a10-page-title {
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 1.3;
  margin-top: 2px;
}

/* ===== 兩列顯示餘額 ===== */
.a10-balance-container {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 16px;
}
.a10-balance-container > div {
  flex: 1 1 48%;
  text-align: center;
}

/* ===== 宣傳圖：等寬、同留白、同視覺風格 ===== */
.promo-img {
  display: block;
  width: calc(100% - (var(--side-gap) * 2));
  height: auto;

  /* 只留一次間距（預設 10px，如需再上移就改這裡） */
  margin-top: var(--first-section-gap);
  margin-left: var(--side-gap);
  margin-right: var(--side-gap);
  margin-bottom: 20px;

  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ===== 卡片列表：兩欄排版 ===== */
.card-container {
  display: flex;
  flex-wrap: wrap;           /* 允許換行 */
  gap: 10px;                 /* 行列間距 */
  margin: 20px var(--side-gap);
}

.card {
  /* 50% 減掉 gap 一半，剛好兩張占滿一行 */
  flex: 0 0 calc(50% - 5px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-image img { width: 100%; height: auto; object-fit: cover; }
.card-desc      { padding: 12px; }
.card-desc h3   { font-size: 1.1rem; margin-bottom: 6px; }
.card-desc p    { font-size: 0.9rem; color: #555; line-height: 1.4; }

/* ===== 底部按鈕列 ===== */
.bottom-buttons {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  background: rgba(0, 0, 0, 0.4);
  height: var(--bottom-buttons-height);
  gap: 0.25rem;
  z-index: 1000;
  overflow: hidden;           /* ← 新增：避免光暈把版面撐寬 */
}
.bottom-buttons button.neon-btn,
.bottom-buttons a.neon-btn {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
}

/* ===== 通用霓虹按鈕（統一版型；顏色用變數覆蓋） ===== */
a.neon-btn,
button.neon-btn {
  /* 預設青⇄粉配色（可被個別按鈕覆寫） */
  --bg1: rgba(0, 255, 255, 0.28);
  --bg2: rgba(255, 0, 255, 0.28);
  --glow1: #00f0ff;
  --glow2: #ff00f0;
  --hover1: rgba(0, 255, 255, 0.85);
  --hover2: rgba(255, 0, 255, 0.75);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  background: linear-gradient(45deg, var(--bg1), var(--bg2)) padding-box !important;
  color: #e0ffff;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.3s;
  box-sizing: border-box;
}
a.neon-btn::before,
button.neon-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(60deg, var(--glow1), var(--glow2), var(--glow1));
  background-size: 200% 200%;
  filter: blur(8px);
  opacity: 0.7;
  z-index: -1;
  animation: neon-border 3s ease infinite;
}
@keyframes neon-border {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
a.neon-btn:hover,
button.neon-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px var(--hover1), 0 0 24px var(--hover2);
}

/* ===== 手機端覆蓋 ===== */
@media (max-width: 600px) {
  .top-buttons,
  .bottom-buttons {
    height: auto !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
    gap: 0.1rem;
  }
  .top-buttons::-webkit-scrollbar,
  .bottom-buttons::-webkit-scrollbar { display: none; }

  .top-buttons .neon-btn,
  .bottom-buttons .neon-btn {
    flex: 0 0 auto;
    width: auto;
    height: auto !important;
    padding: 0.2rem 0.6rem !important;
    margin: 0;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    word-break: keep-all;
  }

  .a10-balance-container { font-size: 12px; gap: 4px; }
  .a10-page-title        { font-size: 12px; line-height: 1.3; }
}

/* ==== 個別顏色覆寫：僅改色，其餘沿用 .neon-btn ==== */

/* 充值（黃橙） */
#recharge-btn.neon-btn {
  --bg1: rgba(255, 255, 0, 0.28);
  --bg2: rgba(255, 165, 0, 0.28);
  --glow1: #fff949;
  --glow2: #ffb300;
  --hover1: rgba(255, 240, 70, 0.85);
  --hover2: rgba(255, 200, 0, 0.75);
  color: #fff;
}

/* ===== Promo carousel（與舊版單圖對齊的版型） ===== */
.promo-carousel { margin: 0; } /* 不額外加上下間距 */
.promo-carousel .promo-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  padding-bottom: 0;          /* 不增加底部空白 */
  scrollbar-width: none;
}
.promo-carousel .promo-track::-webkit-scrollbar { display: none; }
.promo-carousel .slide { min-width: 100%; scroll-snap-align: center; }
/* 不覆蓋寬度，讓 .promo-img 的舊版規則生效 */
.promo-carousel .promo-img { display: block; border-radius: 8px; }

.promo-carousel .promo-dots {
  display: flex; justify-content: center; gap: 8px; margin-top: 8px;
}
.promo-carousel .promo-dots .dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.4); border: none;
}
.promo-carousel .promo-dots .dot.is-active { background: rgba(255,255,255,.95); }

/* 與舊版完全一致：依寬度等比縮放，高度由原始比例決定 */
.a10-page-image .promo-carousel .promo-img {
  width: calc(100% - (var(--side-gap) * 2)) !important;
  height: auto !important;
  margin-top: var(--first-section-gap) !important;
  margin-bottom: 20px !important;
  margin-left: var(--side-gap) !important;
  margin-right: var(--side-gap) !important;
  border-radius: 8px !important;
}
/* tighten gap below carousel */
.a10-page-image .promo-carousel .promo-img { margin-bottom: 8px !important; }
.promo-carousel .promo-dots { margin-top: 4px !important; margin-bottom: 0 !important; }
.card-container { margin-top: 8px !important; }  /* 原本是 20px */