/* KurTech TapPay — 會員中心的訂閱管理
   顏色沿用主題的 --acc-* 變數；主題沒有定義時退回深色底的預設值，
   這樣外掛給別人用也不會變成看不見的白字。 */

.kt-sub {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kt-sub__empty {
  margin: 0;
  max-width: 620px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--acc-dim, rgba(246,241,255,.62));
  text-wrap: normal;
}

.kt-sub-card {
  padding: 20px 22px;
  border: 1px solid var(--acc-line, rgba(255,255,255,.1));
  border-radius: 16px;
  background: var(--acc-card, rgba(255,255,255,.03));
}
.kt-sub-card--grace,
.kt-sub-card--retrying { border-color: rgba(255,122,47,.4); }
.kt-sub-card--expired,
.kt-sub-card--cancelled { opacity: .74; }

.kt-sub-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: 0 0 14px;
}
.kt-sub-card__title {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--acc-text, #f6f1ff);
  text-wrap: normal;
}
.kt-sub-card__status {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--acc-line, rgba(255,255,255,.12));
  background: rgba(255,255,255,.05);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--acc-text, #f6f1ff);
}
/* 狀態各自給色：綠＝服務中、橘＝扣款有問題、黃＝已排定結束、紅＝已取消、灰＝已到期。
   顏色是客戶掃一眼就懂的第一層資訊，文字才是第二層。 */
.kt-sub-card--active .kt-sub-card__status {
  border-color: rgba(45,212,145,.5);
  background: rgba(45,212,145,.14);
  color: #7ff0c0;
}
.kt-sub-card--grace .kt-sub-card__status,
.kt-sub-card--retrying .kt-sub-card__status {
  border-color: rgba(255,122,47,.5);
  background: rgba(255,122,47,.14);
  color: #ffc9a3;
}
.kt-sub-card--pending_cancel .kt-sub-card__status {
  border-color: rgba(255,201,74,.5);
  background: rgba(255,201,74,.13);
  color: #ffdf9b;
}
.kt-sub-card--cancelled .kt-sub-card__status {
  border-color: rgba(255,77,110,.5);
  background: rgba(255,77,110,.14);
  color: #ffadbc;
}
.kt-sub-card--expired .kt-sub-card__status {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(246,241,255,.72);
}

.kt-sub-card__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kt-sub-card__meta li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
  font-size: 13px;
}
.kt-sub-card__meta span {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--acc-dim, rgba(246,241,255,.58));
}
.kt-sub-card__meta b {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  color: var(--acc-text, #f6f1ff);
  word-break: break-word;
}

.kt-sub-card__alert {
  margin: 14px 0 0;
  padding: 12px 15px;
  border-left: 3px solid #ff7a2f;
  border-radius: 0 10px 10px 0;
  background: rgba(255,122,47,.1);
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--acc-text, #f6f1ff);
  text-wrap: normal;
}

.kt-sub-card__history { margin: 14px 0 0; font-size: 12.5px; }
.kt-sub-card__history > summary {
  cursor: pointer;
  color: var(--acc-dim, rgba(246,241,255,.62));
  font-weight: 700;
}
.kt-sub-card__history ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kt-sub-card__history li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--acc-line, rgba(255,255,255,.08));
}
.kt-sub-card__history li:last-child { border-bottom: 0; padding-bottom: 0; }
.kt-sub-history__date,
.kt-sub-history__amount,
.kt-sub-history__status,
.kt-sub-history__link { flex: 0 0 auto; white-space: nowrap; }
.kt-sub-history__date { color: var(--acc-dim, rgba(246,241,255,.58)); }
.kt-sub-history__amount { font-weight: 700; color: var(--acc-text, #f6f1ff); }
.kt-sub-history__status { color: var(--acc-dim, rgba(246,241,255,.58)); }

.kt-sub-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--acc-line, rgba(255,255,255,.08));
}

/* 中文按鈕與選單一律 flex: 0 0 auto + nowrap：
   彈性容器會把它們壓到 min-content，而中文的 min-content 是一個字寬，
   「更換卡片」就變成四行。 */
.kt-sub-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.kt-sub-form__select {
  flex: 0 0 auto;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--acc-line, rgba(255,255,255,.14));
  border-radius: 10px;
  background: var(--acc-field, rgba(0,0,0,.24));
  color: var(--acc-text, #f6f1ff);
  font: inherit;
  font-size: 13px;
}

.kt-sub-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 9px 16px;
  border: 1px solid var(--acc-line, rgba(213,197,255,.34));
  border-radius: 10px;
  background: rgba(184,156,255,.12);
  color: var(--acc-text, #f6f1ff);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.kt-sub-btn:hover {
  border-color: #b89cff;
  background: rgba(184,156,255,.2);
}

/* 退訂是破壞性操作，做成文字連結而不是實心按鈕 ——
   它不該和「更換卡片」搶同樣的視覺重量。 */
.kt-sub-btn--cancel {
  padding: 9px 4px;
  border: 0;
  background: none;
  font-weight: 400;
  color: var(--acc-dim, rgba(246,241,255,.58));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kt-sub-btn--cancel:hover {
  background: none;
  color: #ff8aa5;
}