/* 購入まわり（PriceBox・画面下の固定バー・サンクス・購入履歴）。持ち主: S3
   色は原本に寄せた仮置き（ヘッダー濃い赤 #7a0000・ボタン赤）。テイストは後工程で決める */
:root {
  --ck-red: #c40000;
  --ck-red-dark: #7a0000;
  --ck-ink: #1f1f1f;
  --ck-muted: #666;
  --ck-line: #e5e5e5;
}

/* ---- ボタン（購入系だけ。共通ボタンは site.css） ---- */
.btn--buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--ck-red);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn--buy:hover { background: var(--ck-red-dark); }
.btn--buy:focus-visible { outline: 3px solid #ffb3b3; outline-offset: 2px; }
.btn--buy[disabled], .btn--buy[aria-busy="true"] { opacity: .6; cursor: progress; }
.btn--owned { background: var(--ck-red-dark); }
/* site.css の .btn--ghost（赤いヘッダー用の白枠）とぶつけないよう別名にする */
.btn--buy-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border: 1px solid var(--ck-line); border-radius: 999px;
  color: var(--ck-ink); text-decoration: none; background: #fff;
}

/* ---- PriceBox ---- */
.price-box {
  scroll-margin-top: 80px;
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--ck-line);
  border-radius: 12px;
  background: #fff;
  color: var(--ck-ink);
}
.price-box__name { margin: 0 0 8px; font-weight: 700; font-size: 1.1rem; }
.price-box__access, .price-box__price { margin: 4px 0; }
.price-box__price { font-size: 1.25rem; font-weight: 700; }
.price-box__action { margin-top: 16px; }
.price-box__action .btn--buy { width: 100%; }
.price-box__hint, .price-box__secure { margin: 8px 0 0; font-size: .85rem; color: var(--ck-muted); }
.price-box__owned { margin: 4px 0; }
.price-box__badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: #e8f5ec; color: #1e7a3c; font-size: .85rem; font-weight: 700;
}
.price-box__soon { margin: 0; color: var(--ck-muted); font-weight: 700; }
.price-box__message { margin: 12px 0 0; }
.price-box__message[hidden] { display: none; }

/* 文言の枠（views/alert.tsx と同じ class 名に合わせる。site.css 側に定義があればそちらが勝つ） */
.alert { padding: 10px 14px; border-radius: 8px; font-size: .95rem; line-height: 1.5; }
.alert--info { background: #f3f6fb; color: #23344d; }
.alert--success { background: #e8f5ec; color: #1e5e33; }
.alert--error { background: #fdecec; color: #8a1414; }

/* ---- スマホの画面下の固定バー ---- */
.price-sticky { display: none; }
@media (max-width: 767px) {
  .price-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--ck-line);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
    transition: transform .2s ease;
  }
  .price-sticky.is-hidden { transform: translateY(110%); }
  .price-sticky__price { font-weight: 700; }
  .price-sticky .btn--buy { min-height: 44px; padding: 0 22px; }
  /* 固定バーの分だけ本文の下を空ける */
  body:has(.price-sticky) { padding-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) { .price-sticky { transition: none; } }

/* ---- サンクス ---- */
.thanks { max-width: 560px; margin: 40px auto; padding: 0 16px; text-align: center; }
.thanks__title { font-size: 1.5rem; margin: 0 0 12px; }
.thanks__product { margin: 0 0 16px; color: var(--ck-muted); }
.thanks__status { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: left; }
.thanks__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
@media (min-width: 768px) { .thanks__actions { flex-direction: row; justify-content: center; } }
.thanks__spinner {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: bt-spin .8s linear infinite;
}
@keyframes bt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .thanks__spinner { animation: none; } }

/* ---- 購入履歴 ---- */
.purchase-history__title { font-size: 1.15rem; margin: 0 0 12px; }
.purchase-history__empty { color: var(--ck-muted); }
.ph-sort { display: flex; gap: 8px; margin-bottom: 12px; }
.ph-sort__btn {
  min-height: 36px; padding: 0 14px; border: 1px solid var(--ck-line); border-radius: 999px;
  background: #fff; color: var(--ck-ink); font: inherit; cursor: pointer;
}
.ph-sort__btn.is-active { background: var(--ck-red-dark); border-color: var(--ck-red-dark); color: #fff; }
.ph-list { list-style: none; margin: 0; padding: 0; }
.ph-item { padding: 12px 0; border-bottom: 1px solid var(--ck-line); }
.ph-item.is-group-start { border-top: 2px solid var(--ck-red-dark); }
.ph-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ph-item__name { font-weight: 700; }
.ph-item__status { font-size: .8rem; padding: 1px 8px; border-radius: 999px; background: #f0f0f0; }
.ph-status--active { background: #e8f5ec; color: #1e7a3c; }
.ph-status--expired { background: #f3e9e8; color: #570f07; }
.ph-status--refunded, .ph-status--revoked { background: #f0f0f0; color: var(--ck-muted); }
.ph-item__days { font-size: .85rem; font-weight: 700; }
.ph-item__days.is-low { color: #c0392b; }
.ph-item__days.is-mid { color: #b9770e; }
.ph-item__days.is-high { color: #1e8449; }
.ph-item__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; font-size: .85rem; color: var(--ck-muted); }
.ph-item--expired .ph-item__name, .ph-item--refunded .ph-item__name, .ph-item--revoked .ph-item__name { color: var(--ck-muted); }