/* Release B: delete my account (424), "Follow Meerath" and "Rate us on Google" (427).
   Additive: nothing of the existing screens is changed. Uses the theme's own tokens. */

/* ---- Account: the small red row at the very bottom ---- */
.account-delete-link {
  display: block;
  margin: 18px auto 8px;
  padding: 10px 14px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #f87171;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
body.light-theme .account-delete-link { color: #b3261e; }

/* ---- the delete steps ---- */
.account-delete-screen { padding-bottom: 28px; }
.account-delete-screen .btn { width: 100%; margin-top: 10px; }
.delete-steps { display: flex; gap: 6px; margin: 4px 0 14px; padding: 0; list-style: none; }
.delete-steps li { flex: 1; height: 4px; border-radius: 4px; background: var(--line); }
.delete-steps li.on { background: #f87171; }
.delete-h { margin: 6px 0 10px; font-size: var(--cx-text-lg, 17px); }
.delete-losses { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.delete-losses li {
  position: relative;
  padding: 10px 12px;
  padding-inline-start: 34px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  font-size: 14px;
  line-height: 1.45;
}
.delete-losses li::before { content: "✕"; position: absolute; inset-inline-start: 12px; top: 10px; color: #f87171; font-weight: 700; }
.delete-small { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.delete-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.delete-chip {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.delete-chip.on { border-color: var(--cx-action, #f08a1a); background: rgba(240, 138, 26, 0.14); color: var(--cx-action, #f08a1a); font-weight: 600; }
.delete-chip:focus-visible, .account-delete-link:focus-visible { outline: 2px solid var(--gold, #e0b15a); outline-offset: 2px; }
.delete-note { display: grid; gap: 6px; margin-bottom: 12px; font-size: 14px; }
.delete-note small { color: var(--muted); font-size: 12px; text-align: end; }
.delete-keep { margin: 4px 0 10px; padding: 12px; border: 1px solid rgba(74, 222, 128, 0.35); border-radius: 14px; background: rgba(74, 222, 128, 0.07); }
.delete-keep p { margin: 0; font-size: 14px; line-height: 1.5; }
.delete-type { display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
.delete-type input { letter-spacing: 0.08em; text-align: center; font-weight: 700; }
.delete-danger { background: #dc2626; color: #fff; border: 0; font-weight: 700; }
.delete-danger:disabled { opacity: 0.45; cursor: not-allowed; }
.delete-error { margin: 10px 0 0; padding: 10px 12px; border: 1px solid rgba(248, 113, 113, 0.45); border-radius: 12px; color: #fca5a5; font-size: 14px; line-height: 1.5; }
body.light-theme .delete-error { color: #b3261e; }
.delete-done { display: grid; justify-items: center; gap: 10px; padding: 28px 8px; text-align: center; }
.delete-done h3 { margin: 0; font-size: 20px; }
.delete-done p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.delete-done-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(74, 222, 128, 0.16); color: #4ade80; font-size: 28px; font-weight: 700; }

/* ---- More: Follow Meerath ---- */
.social-block { display: grid; gap: 12px; margin: 4px 0; }
.social-follow { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.social-follow h3 { margin: 0; font-size: 16px; }
.social-follow p { margin: 4px 0 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.social-row { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.social-link {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 64px;
  color: var(--text);
  font-size: 11px;
  text-align: center;
  text-decoration: none;
}
.social-link span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bg, #070707), 0 0 0 3px var(--line);
  transition: transform var(--cx-fast, 140ms) var(--cx-ease, ease);
}
.social-link:active .social-icon { transform: scale(0.94); }
.social-link:focus-visible, .social-google:focus-visible { outline: 2px solid var(--gold, #e0b15a); outline-offset: 3px; border-radius: 12px; }
.social-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: #1f1f1f;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.social-g { width: 22px; height: 22px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .social-icon { transition: none; }
}

/* ---- Release B phase 2 (430): reward credit in the wallet and at checkout ---- */
.credit-card { margin: 16px 0; padding: 14px; border: 1px solid rgba(74, 222, 128, 0.35); border-radius: 16px; background: var(--card); }
.credit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.credit-head h3 { margin: 0; font-size: 16px; }
.credit-balance { color: #4ade80; font-size: 22px; white-space: nowrap; }
.credit-note, .credit-expiring { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.credit-expiring { color: #fbbf24; font-weight: 600; }
.credit-history { margin-top: 10px; }
.credit-history summary { min-height: 40px; display: flex; align-items: center; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; }
.credit-line { display: flex; justify-content: space-between; gap: 12px; color: #4ade80; }
.credit-why { margin: 6px 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.credit-switch { display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 2px 0 6px; color: var(--muted); font-size: 13px; cursor: pointer; }
.credit-switch input { width: 18px; height: 18px; accent-color: var(--cx-action, #f08a1a); }
body.light-theme .credit-balance, body.light-theme .credit-line { color: #15803d; }
body.light-theme .credit-expiring { color: #b45309; }

/* ---- "Invite a friend" ---- */
.referral-card { margin: 14px 0; padding: 14px; border: 1px solid rgba(240, 138, 26, 0.45); border-radius: 16px;
  background: linear-gradient(135deg, rgba(240, 138, 26, 0.12), rgba(240, 138, 26, 0.02)); }
.referral-card h3 { margin: 0; font-size: 16px; }
.referral-card > p { margin: 6px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.referral-friend { margin: 0 0 10px !important; padding: 8px 10px; border-radius: 10px; background: rgba(74, 222, 128, 0.12); color: var(--text) !important; font-weight: 600; }
.referral-link input { width: 100%; font-size: 13px; text-align: start; unicode-bidi: plaintext; }
.referral-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.referral-actions .btn { width: 100%; margin: 0; min-height: 44px; }
.referral-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; }
.referral-stats div { padding: 8px 4px; border-radius: 10px; background: var(--card); text-align: center; }
.referral-stats dt { color: var(--muted); font-size: 11px; }
.referral-stats dd { margin: 2px 0 0; font-size: 15px; font-weight: 700; }
.referral-left { margin: 8px 0 0 !important; font-size: 12px !important; }

/* ---- Release B phase 2 (433): the promotion that reduced a cart line ---- */
.pq-line-badge-slot:empty { display: none; }
.pq-line-badge { margin: 4px 0 0; }