/* =========================================================
 * 推しカノFukuoka ポイントシステム 共通スタイル
 * 対象: mypage.html / reserve.html / reserve-confirm.html
 *       review.html / review-complete.html
 * ---------------------------------------------------------
 * デザイン方針:
 * - 絵文字を一切使わない (SVGアイコンを使用)
 * - 水色ベースのブランドカラー #145087 / #1E5EB8
 * - 大きめの角丸 (24px)、清潔感重視
 * - 2カラム構成 (左: 残高 / 右: 次ランク)
 * ========================================================= */

/* ================================================
 *  カラーパレット (CSS変数)
 * ================================================ */
:root {
  --pt-blue-900: #0d3d6b;
  --pt-blue-800: #145087;
  --pt-blue-700: #1e5eb8;
  --pt-blue-500: #4a89dd;
  --pt-blue-300: #a2c4f0;
  --pt-blue-100: #dfeeff;
  --pt-blue-50:  #f0f6ff;
  --pt-blue-25:  #f7faff;

  --pt-alert-bg:  #fff2f2;
  --pt-alert-fg:  #b53434;
  --pt-alert-border: #f5b8b8;

  --pt-text-body:  #34536f;
  --pt-text-mute:  #6b7d92;
}

/* ================================================
 *  ポイントカード (mypage メイン)
 * ================================================ */
.point-card {
  position: relative; /* ポップアップ absolute の基準 */
  background: #ffffff;
  border-radius: 18px;
  padding: 10px 12px 8px;
  margin: 8px 0 12px;
  box-shadow: 0 4px 14px rgba(20, 80, 135, 0.08);
  border: 1px solid var(--pt-blue-100);
  color: var(--pt-blue-800);
}

/* ── ヘッダー ── */
.point-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.point-card__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pt-blue-800);
  margin: 0;
  letter-spacing: 0.03em;
}

.point-card__title-icon {
  width: 18px;
  height: 18px;
  color: var(--pt-blue-800);
  flex-shrink: 0;
}

.point-card__rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--pt-blue-800);
  background: var(--pt-blue-50);
  border: 1px solid var(--pt-blue-100);
  white-space: nowrap;
}

.point-card__rank-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--pt-blue-700);
}

/* ランクごとの色替え (案D 王冠アイコン進化) */
.point-card__rank-badge--regular  { color: var(--pt-blue-800); background: var(--pt-blue-50); }
.point-card__rank-badge--regular  .point-card__rank-icon { color: var(--pt-blue-500); }

.point-card__rank-badge--silver   { color: #4a5461; background: #eff1f5; border-color: #d4d8de; }
.point-card__rank-badge--silver   .point-card__rank-icon { color: #7c8592; }

.point-card__rank-badge--gold {
  color: #6a4b00;
  background: linear-gradient(135deg, #fbe293 0%, #e6b533 100%);
  border-color: #b8860b;
}
.point-card__rank-badge--gold .point-card__rank-icon { color: #5c4000; }

.point-card__rank-badge--platinum {
  color: #ffffff;
  background: linear-gradient(135deg, #6a4c93 0%, #3f2860 100%);
  border-color: #2a1a45;
}
.point-card__rank-badge--platinum .point-card__rank-icon { color: #f0d688; }

/* ── 本体 (2カラム) ── */
.point-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 3px 0 4px;
  border-top: 1px solid var(--pt-blue-100);
  border-bottom: 1px solid var(--pt-blue-100);
  align-items: start;
}
/* [hidden]属性はUAデフォルトでdisplay:noneだが、上のdisplay:gridと
   同じ詳細度のためauthor CSSが勝ってしまい、JSがhidden=trueにしても
   非表示にならない(エラー時に数値を隠すP2修正が効かなくなる)。
   詳細度を上げて明示的に上書きする。 */
.point-card__body[hidden] {
  display: none;
}

.point-card__col {
  padding: 5px 8px;
  min-width: 0; /* grid overflow 対策 */
}

.point-card__col--balance {
  border-right: 1px solid var(--pt-blue-100);
  text-align: left;
}

.point-card__col--next {
  text-align: left;
}

.point-card__col-label {
  font-size: 10px;
  color: var(--pt-text-mute);
  margin: 0 0 3px;
  letter-spacing: 0.02em;
}

/* ── 残高表示 (左カラム) ── */
.point-card__balance {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--pt-blue-700);
  line-height: 1;
}
.point-card__balance-value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.point-card__balance-unit {
  font-size: 12px;
  font-weight: 700;
}

.point-card__balance-hint {
  font-size: 9.5px;
  color: var(--pt-text-mute);
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  line-height: 1.3;
}

/* 未承認の予約が使用予定として確保しているポイント量。
   残高自体は減らさない(承認時一元化)ため、見せ方だけで「実質使える分」を伝える。 */
.point-card__balance-pending {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--pt-blue-700);
  background: var(--pt-blue-50);
  border-radius: 8px;
  padding: 3px 8px;
  margin: 6px 0 0;
  line-height: 1.3;
}

.point-card__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--pt-alert-bg);
  border: 1px solid var(--pt-alert-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0;
}
/* [hidden]属性が上のdisplay:flexに上書きされ、初期状態(hidden指定済み)でも
   常に表示されてしまう(=エラーが一度も起きていなくてもバナーが出る)。
   .point-card__bodyと同じ原因のため同じ対処をする。 */
.point-card__error[hidden] {
  display: none;
}

.point-card__error-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pt-alert-fg);
  margin: 0;
}

.point-card__error-retry {
  font-size: 12px;
  font-weight: 600;
  color: var(--pt-alert-fg);
  background: #fff;
  border: 1px solid var(--pt-alert-border);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.point-card__error-retry:hover {
  background: var(--pt-alert-bg);
}

.point-card__pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--pt-blue-50);
  border: 1px solid var(--pt-blue-100);
  color: var(--pt-blue-800);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── 次ランク (右カラム) ── */
.point-card__next-value {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 800;
  color: var(--pt-blue-700);
  letter-spacing: -0.01em;
  line-height: 1;
}

.point-progress-bar {
  width: 100%;
  height: 4px;
  background: var(--pt-blue-50);
  border-radius: 999px;
  overflow: hidden;
}
.point-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pt-blue-500), var(--pt-blue-700));
  border-radius: 999px;
  transition: width 0.3s ease, background 0.3s ease;
}
/* 現ランクに応じてバー色を変更 - JS で data-rank を設定 */
.point-card[data-rank="regular"]  .point-progress-fill {
  background: linear-gradient(90deg, var(--pt-blue-500), var(--pt-blue-700));
}
.point-card[data-rank="silver"]   .point-progress-fill {
  background: linear-gradient(90deg, #b8bfc9 0%, #6c7684 100%);
}
.point-card[data-rank="gold"]     .point-progress-fill {
  background: linear-gradient(90deg, #fbe293 0%, #b8860b 100%);
}
.point-card[data-rank="platinum"] .point-progress-fill {
  background: linear-gradient(90deg, #8b6bd8 0%, #3f2860 100%);
}
.point-progress-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  font-size: 9px;
  color: var(--pt-text-mute);
}
.point-card__next-hint {
  margin: 4px 0 0;
  font-size: 9.5px;
  color: var(--pt-text-mute);
  line-height: 1.4;
}
.point-card__next-hint strong {
  color: var(--pt-blue-700);
  font-weight: 700;
}

/* ── フッター (履歴リンク) ── */
.point-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.point-card__history-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px 3px 8px;
  background: transparent;
  border: none;
  color: var(--pt-blue-700);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
}
.point-card__history-link:hover {
  background: var(--pt-blue-50);
}
.point-card__chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}
.point-card__history-link[aria-expanded="true"] .point-card__chevron {
  transform: rotate(90deg);
}

/* ── 展開式履歴パネル ── */
.point-card__history-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--pt-blue-100);
}
.point-card__spend12m {
  font-size: 11px;
  color: var(--pt-text-mute);
  margin: 10px 0 0;
  text-align: right;
}
.point-card__spend12m strong {
  color: var(--pt-blue-800);
  font-weight: 700;
}

/* ── ポイント履歴 ── */
.point-history__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.point-history__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--pt-blue-50);
  font-size: 12px;
}
.point-history__item:last-child { border-bottom: none; }
.point-history__date {
  color: var(--pt-text-mute);
  min-width: 4.5em;
}
.point-history__label {
  flex: 1;
  color: var(--pt-text-body);
}
.point-history__amount { font-weight: 700; }
.point-history__amount--plus  { color: #2e7a44; }
.point-history__amount--minus { color: #b94242; }
.point-history__empty {
  padding: 16px 0;
  text-align: center;
  color: var(--pt-text-mute);
  font-size: 12px;
}

/* ================================================
 *  お友達紹介 (別カード、point-card の下)
 * ================================================ */
.referral-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 16px 18px;
  margin: 0 0 20px;
  border: 1px solid var(--pt-blue-100);
  box-shadow: 0 3px 12px rgba(20, 80, 135, 0.06);
}
.referral-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--pt-blue-800);
  margin: 0 0 10px;
  letter-spacing: 0.04em;
}
.referral-card__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.referral-card__code {
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--pt-blue-50);
  border: 1px solid var(--pt-blue-100);
  font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--pt-blue-800);
  letter-spacing: 0.08em;
}
.referral-card__btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--pt-blue-500);
  background: #ffffff;
  color: var(--pt-blue-800);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
}
.referral-card__btn:hover { background: var(--pt-blue-50); }
.referral-card__btn--line {
  background: #06c755;
  color: #fff;
  border-color: #06c755;
}
.referral-card__btn--line:hover { background: #05a648; color: #fff; }
.referral-card__hint {
  font-size: 11px;
  color: var(--pt-text-mute);
  margin: 8px 0 0;
  line-height: 1.6;
}

/* ================================================
 *  ヘッダー右側 (バッジ + ?インフォボタン)
 * ================================================ */
.point-card__header-right {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.point-info-btn {
  background: transparent;
  border: none;
  padding: 3px;
  cursor: pointer;
  color: #b8bfc9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: color 0.15s, background-color 0.15s;
  line-height: 0;
}
.point-info-btn:hover,
.point-info-btn[aria-expanded="true"] {
  color: var(--pt-blue-700);
  background: var(--pt-blue-50);
}

/* ================================================
 *  ランク情報ポップアップ (?ボタン押下で表示)
 *  モーダル形式: 背景を薄い黒でオーバーレイ、ダイアログは白
 * ================================================ */

/* 背景オーバーレイ (画面全体を薄暗く) */
.point-info-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9998;
  animation: pip-backdrop-fade 0.15s ease-out;
}
@keyframes pip-backdrop-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ダイアログ本体 (画面中央にセンタリング) */
.point-info-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 340px;
  width: calc(100vw - 40px);
  z-index: 9999;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid var(--pt-blue-100);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  animation: pip-fade 0.15s ease-out;
}
@keyframes pip-fade {
  from { opacity: 0; transform: translate(-50%, -48%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.point-info-popover__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.point-info-popover__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--pt-blue-800);
  letter-spacing: 0.04em;
}
.point-info-popover__close {
  background: transparent;
  border: none;
  padding: 0 4px;
  cursor: pointer;
  color: var(--pt-text-mute);
  font-size: 16px;
  line-height: 1;
}
.point-info-popover__close:hover { color: var(--pt-blue-800); }

.point-info-popover__table {
  display: flex;
  flex-direction: column;
  border-top: 1px dashed var(--pt-blue-100);
}
.pip-row {
  display: grid;
  grid-template-columns: 5em 1fr 2.8em;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid var(--pt-blue-50);
  font-size: 11px;
  align-items: baseline;
}
.pip-row:last-child { border-bottom: none; }
.pip-row--head {
  font-size: 10px;
  color: var(--pt-text-mute);
  font-weight: 500;
}
.pip-row > span:first-child {
  font-weight: 700;
  color: var(--pt-blue-800);
}
.pip-row > span:nth-child(2) {
  color: var(--pt-text-body);
}
.pip-row > span:last-child {
  color: var(--pt-blue-700);
  font-weight: 700;
  text-align: right;
}
.pip-row--head > span { font-weight: 500; color: var(--pt-text-mute); }

.point-info-popover__note {
  font-size: 10px;
  color: var(--pt-text-mute);
  margin: 8px 0 0;
  padding-top: 6px;
  border-top: 1px dashed var(--pt-blue-100);
  line-height: 1.6;
}

/* ================================================
 *  予約入力画面 (reserve.html) 保有ポイントストリップ
 * ================================================ */
.point-balance-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin: 8px 0 12px;
  background: #ffffff;
  border: 1px solid var(--pt-blue-100);
  border-radius: 12px;
  font-size: 12px;
  color: var(--pt-blue-800);
}
.point-balance-strip__label { color: var(--pt-text-mute); }
.point-balance-strip__value { font-weight: 700; font-size: 15px; }
.point-balance-strip__hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--pt-text-mute);
}

/* ================================================
 *  予約確認画面 (reserve-confirm.html) ポイント利用UI
 * ================================================ */
.point-use-block {
  margin: 16px 0;
  padding: 16px 16px;
  background: var(--pt-blue-25);
  border: 1px solid var(--pt-blue-100);
  border-radius: 16px;
}
.point-use-block__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--pt-blue-800);
  margin: 0 0 10px;
  letter-spacing: 0.04em;
}
.point-use-block__balance {
  font-size: 12px;
  color: var(--pt-text-body);
  margin-bottom: 10px;
}
.point-use-block__balance strong {
  font-size: 15px;
  color: var(--pt-blue-800);
  margin: 0 2px;
  font-weight: 700;
}
.point-use-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.point-use-input {
  width: 9em;
  padding: 8px 10px;
  border: 1px solid var(--pt-blue-500);
  border-radius: 8px;
  font-size: 14px;
  text-align: right;
  background: #fff;
}
.point-use-input:focus {
  outline: none;
  border-color: var(--pt-blue-800);
  box-shadow: 0 0 0 2px rgba(20, 80, 135, 0.15);
}
.point-use-input__suffix { font-size: 13px; color: var(--pt-text-body); }
.point-use-max-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--pt-blue-500);
  background: #ffffff;
  color: var(--pt-blue-800);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.point-use-max-btn:hover { background: var(--pt-blue-50); }
.point-use-hint {
  font-size: 11px;
  color: var(--pt-text-mute);
  line-height: 1.6;
  margin: 0;
}
.point-use-error {
  color: var(--pt-alert-fg);
  font-size: 11px;
  margin-top: 4px;
}

.point-earn-preview {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--pt-blue-50);
  border: 1px solid var(--pt-blue-100);
  border-radius: 10px;
  font-size: 12px;
  color: var(--pt-blue-800);
  text-align: center;
}
.point-earn-preview strong {
  color: var(--pt-blue-700);
  font-size: 15px;
  margin: 0 2px;
  font-weight: 700;
}

/* 概算料金テーブル内のポイント利用行 */
.confirm-row--point dd {
  color: var(--pt-alert-fg);
  font-weight: 600;
}

/* ================================================
 *  レビュー画面 (review.html) キャンペーンバナー
 * ================================================ */
.review-point-banner {
  margin: 12px 0 16px;
  padding: 16px 18px;
  background: var(--pt-blue-25);
  border: 1px solid var(--pt-blue-100);
  border-radius: 16px;
  color: var(--pt-blue-800);
}
.review-point-banner__title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--pt-blue-800);
}
.review-point-banner__amount {
  font-size: 20px;
  font-weight: 800;
  color: var(--pt-blue-700);
  margin: 4px 0;
  letter-spacing: -0.01em;
}
.review-point-banner__amount span { font-size: 26px; }
.review-point-banner__hint {
  font-size: 11px;
  color: var(--pt-text-mute);
  line-height: 1.6;
  margin: 4px 0 0;
}
.review-point-banner__badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--pt-blue-700);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-left: 6px;
  vertical-align: middle;
}

/* ================================================
 *  レビュー完了画面 (review-complete.html)
 * ================================================ */
.review-complete-point {
  margin: 16px 0 24px;
  padding: 22px 20px;
  background: var(--pt-blue-25);
  border: 1px solid var(--pt-blue-100);
  border-radius: 20px;
  text-align: center;
  color: var(--pt-blue-800);
}
.review-complete-point__amount {
  font-size: 32px;
  font-weight: 800;
  color: var(--pt-blue-700);
  margin: 4px 0;
  letter-spacing: -0.01em;
}
.review-complete-point__hint {
  font-size: 12px;
  color: var(--pt-text-mute);
  margin: 6px 0 0;
  line-height: 1.6;
}

/* ================================================
 *  PC向け微調整
 * ================================================ */
@media (min-width: 768px) {
  .point-card { padding: 16px 20px 14px; }
  .point-card__title { font-size: 15px; }
  .point-card__title-icon { width: 22px; height: 22px; }
  .point-card__balance-value { font-size: 34px; }
  .point-card__balance-unit { font-size: 14px; }
  .point-card__next-value { font-size: 22px; }
  .point-card__col { padding: 8px 16px; }
  .point-card__col-label { font-size: 11.5px; }
  .point-card__balance-hint,
  .point-card__next-hint { font-size: 11px; }
  .point-card__pill { font-size: 11px; }
  .point-use-block { padding: 18px 20px; }
  .point-use-block__title { font-size: 14px; }
}