/* sst-points — checkout redemption toggle panel.
   Sits directly below the coupon panel; reuses the checkout design tokens
   from account-checkout.css with hard fallbacks so it degrades safely. */

.sst-checkout-points-panel {
  margin: 18px 0 0;
  border-top: 1px solid var(--sst-checkout-soft-line, #e3e6ea);
  padding-top: 18px;
}

.sst-checkout-points-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.sst-checkout-points-panel__head h3 {
  margin: 0;
  color: var(--sst-checkout-ink, #111111);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.sst-checkout-points-panel__head span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  background: var(--sst-checkout-subtle, #f6f7f7);
  color: var(--sst-checkout-muted, #4f555c);
  padding: 2px 9px;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

/* One-tap switch (no code input, no Apply button — Baymard). */

.sst-checkout-points-panel__toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}

.sst-checkout-points-panel__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.sst-checkout-points-panel__slider {
  flex: 0 0 auto;
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: #cfd4da;
  transition: background-color 0.15s ease;
}

.sst-checkout-points-panel__slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.sst-checkout-points-panel__input:checked + .sst-checkout-points-panel__slider {
  background: var(--sst-checkout-accent, #ac004d);
}

.sst-checkout-points-panel__input:checked + .sst-checkout-points-panel__slider::after {
  transform: translateX(20px);
}

.sst-checkout-points-panel__input:focus-visible + .sst-checkout-points-panel__slider {
  outline: 2px solid var(--sst-checkout-accent, #ac004d);
  outline-offset: 2px;
}

.sst-checkout-points-panel__input:disabled + .sst-checkout-points-panel__slider {
  opacity: 0.55;
}

.sst-checkout-points-panel__input:disabled ~ .sst-checkout-points-panel__text {
  opacity: 0.7;
}

.sst-checkout-points-panel__text {
  color: var(--sst-checkout-ink, #111111);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

/* "You have 1,234 pts (=¥1,234)" — shown only while the toggle is off. */
.sst-checkout-points-panel__have {
  margin: 6px 0 0;
  color: var(--sst-checkout-muted, #4f555c);
  font-size: 13px;
  line-height: 1.35;
}

/* Redemption cap (0.3.4) + lot-expiry model v2: static fine-print one-liners,
   always the last two lines of the panel. */
.sst-checkout-points-panel__cap-note,
.sst-checkout-points-panel__expiry-note {
  margin: 8px 0 0;
  color: var(--sst-checkout-muted, #4f555c);
  font-size: 11px;
  line-height: 1.4;
}

.sst-checkout-points-panel__cap-note + .sst-checkout-points-panel__expiry-note {
  margin-top: 3px;
}

.sst-checkout-points-panel__status {
  margin-top: 10px;
  border-radius: 4px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.sst-checkout-points-panel__status.is-success {
  background: #f0f8f3;
  color: #17643a;
}

.sst-checkout-points-panel__status.is-error {
  background: #fff5f5;
  color: #8a1f36;
}

/* Self-contained loading state (never reuses the coupon panel's). */
.sst-checkout-points-panel.is-loading {
  opacity: 0.72;
}

.sst-checkout-points-panel.is-loading .sst-checkout-points-panel__toggle {
  cursor: progress;
}

/* Guest one-liner (live mode, not logged in). */
.sst-checkout-points-panel--guest .sst-checkout-points-panel__guest {
  margin: 0;
  color: var(--sst-checkout-muted, #4f555c);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .sst-checkout-points-panel__slider,
  .sst-checkout-points-panel__slider::after {
    transition: none;
  }
}

/* "Points you'll earn" preview (0.3.6): the cart totals row and the checkout
   panel line. Muted and small on purpose — it is an estimate sitting next to
   real money, and it must never read louder than the Total it precedes. */

.sst-points-earn-preview th,
.sst-points-earn-preview td {
  color: var(--sst-checkout-muted, #4f555c);
  font-size: 13px;
  font-weight: 600;
}

.sst-points-earn-preview__note,
.sst-points-earn-preview__inline {
  color: var(--sst-checkout-muted, #4f555c);
  font-size: 12px;
  font-weight: 600;
}

/* "Points ×5" coupon (0.7.0): the estimate is the coupon's whole point, so it
   takes the accent colour; the badge is a small outlined pill. Dark mode reads
   the same custom properties. */
.sst-points-earn-preview--pt5 strong,
.sst-points-earn-preview--pt5 td strong {
  color: var(--sst-checkout-accent, #ac004d);
}

.sst-points-earn-preview__pt5 {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--sst-checkout-accent, #ac004d);
  border-radius: 999px;
  color: var(--sst-checkout-accent, #ac004d);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.sst-checkout-points-panel__earn {
  margin: 0 0 10px;
  color: var(--sst-checkout-muted, #4f555c);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

/* Rank-up gauge row (0.5.0): one row in the cart totals table and one in the
   checkout review table, directly under the bulk next-tier row. Light palette,
   same track/fill as the quick-order cart gauges (#e7eee9 / #17643a), so the
   three surfaces read as one bar in three places. */

.sst-points-rank-gauge th,
.sst-points-rank-gauge td {
  color: var(--sst-checkout-muted, #4f555c);
  font-size: 13px;
  font-weight: 600;
}

.sst-points-rank-gauge__copy {
  display: block;
  line-height: 1.35;
}

.sst-points-rank-gauge__meter {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 6px;
  border-radius: 999px;
  background: #e7eee9;
  overflow: hidden;
}

.sst-points-rank-gauge__meter > span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: 999px;
  background: #17643a;
}