/* ============================================================
   pricing.css — /pricing.php and /pay_callback.php (docs/PRICING_PLAN.md §9, §9-پ).
   Same scope discipline as legal-pages.css: every rule is nested under
   `.ph-legal`, logical properties only (RTL), no bare selectors and no new
   font. Colours are TOKENS: --ph-* come from platform-home.css, --pr-* are
   this page's few extra roles. Both themes (§9-پ rule 3) come from the
   site's one token source (docs/BRAND_DESIGN_PLAN.md §3-الف, data-theme), so no
   component here carries a colour of its own.
   ============================================================ */

.ph-legal.pr-page {
  /* this page's roles, named once — every colour is a site token (platform-home.css, both themes) */
  --pr-surface: var(--ph-surface);
  --pr-surface-2: var(--ph-surface-2);
  --pr-solid: var(--ph-surface);
  --pr-accent: var(--ph-link);
  --pr-accent-line: var(--ph-act-line);
  --pr-accent-soft: var(--ph-act-soft);
  --pr-warm-ink: var(--ph-light);
  --pr-warm-soft: var(--ph-light-soft);
  --pr-warm-line: var(--ph-light-line);
  --pr-strike: var(--ph-text-3);
  --pr-bad: var(--ph-bad);
  --pr-bad-soft: var(--ph-bad-soft);
  --pr-pending: var(--ph-light);
  --pr-shadow: var(--ph-shadow-lg);
  --pr-radius-sm: 14px;
  /* the account sheet (chat-account.js) paints itself from these, so it matches the page in both themes */
  --bg-secondary: var(--ph-surface);
  --nbgc-ink: var(--ph-text);
  --nbgc-ink-soft: var(--ph-text-2);
  --nbgc-accent: var(--ph-act);
  --nbgc-ink-on-accent: var(--ph-act-ink);
  --border: var(--ph-line-2);
  --bg-input: var(--ph-field);
}

/* The pricing page needs room for four tiles; prose inside it keeps a reading measure. */
.ph-legal.pr-page .ph-shell,
.ph-legal.pr-page .ph-foot { max-width: 70rem; }
.ph-legal.pr-page main .ph-section { margin-block-start: 26px; scroll-margin-block-start: 24px; }

.ph-legal .pr-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ph-legal .pr-ico {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

/* ---------- hero ---------- */
.ph-legal .pr-hero {
  padding: clamp(18px, 4vh, 40px) 0 6px;
  max-width: 46rem;
}

.ph-legal .pr-title {
  margin: 0 0 14px;
  text-wrap: balance;
  font-size: var(--ph-fs-5);
  font-weight: 700;
  line-height: 1.32;
  color: var(--ph-text);
}

.ph-legal .pr-lead {
  margin: 0;
  max-width: 40rem;
  font-size: var(--ph-fs-3);
  line-height: 1.95;
  color: var(--ph-text-2);
}

.ph-legal .pr-lead strong { color: var(--ph-text); }

/* ---------- section heads ---------- */
.ph-legal .pr-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-block-end: 18px;
  max-width: 44rem;
}

.ph-legal.pr-page .pr-head::after { display: none; }

.ph-legal .pr-sub {
  margin: 0;
  color: var(--ph-text-2);
  font-size: var(--ph-fs-3);
  line-height: 1.9;
}

.ph-legal .pr-sub strong { color: var(--ph-text); }

.ph-legal .pr-fine {
  margin: 12px 0 0;
  font-size: var(--ph-fs-2);
  line-height: 1.9;
  color: var(--ph-text-2);
}

/* ---------- welcome gift band ---------- */
.ph-legal .pr-gift {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block: 22px 4px;
  padding: 14px 16px;
  border: 1px solid var(--pr-warm-line);
  border-radius: var(--ph-r-2);
  background: var(--pr-warm-soft);
}

.ph-legal .pr-gift-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--pr-warm-soft);
  border: 1px solid var(--pr-warm-line);
  color: var(--pr-warm-ink);
  font-size: var(--ph-fs-3);
}

.ph-legal .pr-gift-text { flex: 1; min-width: 0; }
.ph-legal .pr-gift-title { margin: 0; font-weight: 700; font-size: var(--ph-fs-3); color: var(--ph-text); }
.ph-legal .pr-gift-sub { margin: 2px 0 0; font-size: var(--ph-fs-2); color: var(--ph-text-2); line-height: 1.8; }

.ph-legal .pr-gift-cta {
  min-height: 44px;
  color: var(--ph-text);
  border-color: var(--pr-warm-line);
  background: transparent;
}

.ph-legal .pr-gift-cta:hover { border-color: var(--pr-warm-ink); }
.ph-legal .pr-gift-cta[hidden] { display: none; }

/* ---------- the three ways ---------- */
.ph-legal .pr-ways {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 14px;
  margin-block: 22px 0;
  align-items: stretch;
}

.ph-legal .pr-way {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 18px 18px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-2);
  background: var(--pr-surface);
  min-width: 0;
}

.ph-legal .pr-way-name { margin: 0 0 4px; font-size: var(--ph-fs-3); font-weight: 700; color: var(--ph-text); }
.ph-legal .pr-way-line { margin: 0; color: var(--ph-text-2); font-size: var(--ph-fs-2); }
.ph-legal .pr-way-price { margin: 6px 0 0; color: var(--ph-text); }
.ph-legal .pr-way-price strong { font-size: var(--ph-fs-5); font-weight: 700; }
.ph-legal .pr-way-price span { color: var(--ph-text-2); font-size: var(--ph-fs-2); }
.ph-legal .pr-way-note { margin: 2px 0 0; color: var(--ph-text-2); font-size: var(--ph-fs-2); line-height: 1.8; }

.ph-legal .pr-way-list { list-style: none; margin: 10px 0 0; padding: 0; font-size: var(--ph-fs-2); }
.ph-legal .pr-way-list li { display: flex; align-items: center; gap: 8px; padding-block: 6px; border-block-end: 1px solid var(--ph-line); color: var(--ph-text); }
.ph-legal .pr-way-list li:last-child { border-block-end: 0; }
.ph-legal .pr-way-list .pr-ico { color: var(--pr-accent); }
.ph-legal .pr-way-k { flex: 1; color: var(--ph-text-2); }
.ph-legal .pr-way-v { font-weight: 700; white-space: nowrap; }

.ph-legal .pr-way-go {
  margin-block-start: auto;
  min-height: 46px;
  width: 100%;
  color: var(--ph-text);
  border-color: var(--ph-line);
}

.ph-legal .pr-way > :nth-last-child(2) { margin-block-end: 14px; }
.ph-legal .pr-way-go:hover { border-color: var(--pr-accent-line); }

/* «همیشه رایگان»: each line struck at its real credit price, «رایگان» beside it */
.ph-legal .pr-way-free {
  border-color: color-mix(in srgb, var(--pr-accent-line) 45%, var(--ph-line));
  background: var(--pr-accent-soft);
}

.ph-legal .pr-value-list {
  list-style: none;
  margin: 2px 0 6px;
  padding: 0;
}

.ph-legal .pr-value-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 10px;
  padding-block: 8px;
  border-block-end: 1px solid var(--ph-line);
  font-size: var(--ph-fs-2);
}

.ph-legal .pr-value-what { color: var(--ph-text); }
.ph-legal .pr-value-was { color: var(--pr-strike); font-size: var(--ph-fs-2); white-space: nowrap; text-decoration-thickness: 1px; }
.ph-legal .pr-value-free { color: var(--pr-accent); font-weight: 700; white-space: nowrap; }

.ph-legal .pr-value-day { margin: 8px 0 0; font-size: var(--ph-fs-3); line-height: 1.8; color: var(--ph-text); }
.ph-legal .pr-value-day strong { font-weight: 700; color: var(--pr-accent); }
.ph-legal .pr-value-month { margin: 0; font-size: var(--ph-fs-2); color: var(--ph-text-2); }

.ph-legal .pr-how {
  margin-block-start: 6px;
  font-size: var(--ph-fs-2);
  color: var(--ph-text-2);
}

.ph-legal .pr-how summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  cursor: pointer;
  color: var(--pr-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
}

.ph-legal .pr-how p,
.ph-legal .pr-how li { line-height: 1.85; margin: 6px 0 0; }
.ph-legal .pr-how ul { margin: 6px 0 0; padding-inline-start: 1.1rem; }

/* ---------- Plus tiles ---------- */
.ph-legal .pr-benefits {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 18px;
  padding: 0;
  color: var(--ph-text);
  font-weight: 700;
}

.ph-legal .pr-benefits li { display: inline-flex; align-items: center; gap: 8px; }
.ph-legal .pr-benefits .pr-ico { color: var(--pr-accent); }

.ph-legal .pr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 14px;
  margin-block: 6px 14px;
}

.ph-legal .pr-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px 18px 18px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-2);
  background: var(--pr-surface);
  text-align: center;
  min-width: 0;
}

/* «پیشنهادِ ما»: a coloured edge, never a bigger tile (§9-پ rule 5) */
.ph-legal .pr-tile-hot {
  border-color: var(--pr-accent-line);
  box-shadow: inset 0 0 0 1px var(--pr-accent-line);
  background: var(--pr-accent-soft);
}

.ph-legal .pr-badge {
  position: absolute;
  inset-block-start: -12px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--ph-act);
  color: var(--ph-act-ink);
  font-size: var(--ph-fs-1);
  font-weight: 700;
  white-space: nowrap;
}

.ph-legal .pr-name { margin: 0; font-size: var(--ph-fs-3); color: var(--ph-text); }

.ph-legal .pr-days,
.ph-legal .pr-perday {
  margin: 0;
  font-size: var(--ph-fs-2);
  color: var(--ph-text-2);
}

.ph-legal .pr-price { margin: 10px 0 0; color: var(--ph-text); }
.ph-legal .pr-price strong { font-size: var(--ph-fs-5); font-weight: 700; }
.ph-legal .pr-price span { font-size: var(--ph-fs-2); color: var(--ph-text-2); }

.ph-legal .pr-compare-note {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--pr-surface-2);
  font-size: var(--ph-fs-1);
  line-height: 1.75;
  color: var(--ph-text-2);
}

.ph-legal .pr-compare-note s,
.ph-legal .pr-rates s { color: var(--pr-strike); text-decoration-thickness: 1px; white-space: nowrap; }

.ph-legal .pr-buy {
  margin-block-start: auto;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  cursor: pointer;
}

.ph-legal .pr-tile > :nth-last-child(2) { margin-block-end: 16px; }

/* one primary per section (§5): only «پیشنهادِ ما» carries the solid button; the other tiles'
   buttons are outlined — same element, same behaviour */
.ph-legal .pr-tile:not(.pr-tile-hot) .pr-buy { background: transparent; color: var(--ph-text); border-color: var(--ph-line-2); }
.ph-legal .pr-tile:not(.pr-tile-hot) .pr-buy:hover,
.ph-legal .pr-tile:not(.pr-tile-hot) .pr-buy:focus-visible { background: var(--ph-surface-2); border-color: var(--ph-act-line); box-shadow: none; }

.ph-legal .pr-buy[disabled],
.ph-legal .pr-topup-go[disabled],
.ph-legal .pr-co-pay[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.ph-legal .pr-coupon {
  margin-block: 6px;
  padding: 2px 16px;
  border: 1px dashed var(--ph-line);
  border-radius: 16px;
  color: var(--ph-text-2);
}

.ph-legal .pr-coupon summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--pr-accent); }
.ph-legal .pr-coupon label { display: block; margin-block: 10px 6px; font-size: var(--ph-fs-2); }

.ph-legal .pr-coupon input,
.ph-legal .pr-amt-input {
  width: 100%;
  max-width: 22rem;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--ph-line);
  border-radius: 12px;
  background: var(--bg-input);
  color: var(--ph-text);
  font: inherit;
  font-size: 16px;
}

.ph-legal .pr-msg {
  margin: 10px 0 0;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--ph-line);
  font-size: var(--ph-fs-3);
  line-height: 1.8;
}

.ph-legal .pr-msg-error { border-color: var(--pr-bad); color: var(--pr-bad); background: var(--pr-bad-soft); }
.ph-legal .pr-msg-ok    { border-color: var(--pr-accent-line); color: var(--ph-text); background: var(--pr-accent-soft); }
.ph-legal .pr-msg-info  { color: var(--ph-text-2); }

/* trust row: small, under the tiles, not a wall of text (§9-پ rule 7) */
.ph-legal .pr-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 16px 0 0;
  padding: 12px 8px;
  border-block: 1px solid var(--ph-line);
  font-size: var(--ph-fs-2);
  color: var(--ph-text-2);
}

.ph-legal .pr-trust li { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; }
.ph-legal .pr-trust .pr-ico { color: var(--pr-accent); }

/* ---------- credit: rates and top-up ---------- */
.ph-legal .pr-rates-wrap,
.ph-legal .pr-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-2);
  background: var(--pr-surface);
}

.ph-legal .pr-rates {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ph-fs-2);
}

.ph-legal .pr-rates th,
.ph-legal .pr-rates td {
  padding: 12px 14px;
  border-block-end: 1px solid var(--ph-line);
  text-align: start;
  vertical-align: top;
  color: var(--ph-text-2);
}

.ph-legal .pr-rates thead th { color: var(--ph-text); font-weight: 700; background: var(--pr-surface-2); }
.ph-legal .pr-rates tbody td:first-child { color: var(--ph-text); }
.ph-legal .pr-rates tbody tr:last-child td { border-block-end: 0; }
.ph-legal .pr-rate-num { white-space: nowrap; color: var(--ph-text) !important; font-weight: 700; }
.ph-legal .pr-rates strong { color: var(--pr-accent); }

.ph-legal .pr-strong-line { margin: 12px 0 0; font-weight: 700; color: var(--ph-text); }

.ph-legal .pr-topup-box {
  margin-block-start: 18px;
  padding: 18px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-2);
  background: var(--pr-surface);
}

.ph-legal .pr-topup-title { margin: 0 0 12px; font-size: var(--ph-fs-3); color: var(--ph-text); }

.ph-legal .pr-topup {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ph-legal .pr-amt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 8px 6px;
  border: 1px solid var(--ph-line);
  border-radius: var(--pr-radius-sm);
  cursor: pointer;
  text-align: center;
  color: var(--ph-text);
  font-weight: 700;
}

.ph-legal .pr-amt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ph-legal .pr-amt:has(input:checked) { border-color: var(--pr-accent-line); box-shadow: inset 0 0 0 1px var(--pr-accent-line); background: var(--pr-accent-soft); }
.ph-legal .pr-amt:has(input:focus-visible) { outline: 2px solid var(--pr-accent); outline-offset: 2px; }
.ph-legal .pr-amt-tag { font-size: var(--ph-fs-1); font-weight: 700; color: var(--pr-accent); line-height: 1.5; }

.ph-legal .pr-amt-own { display: block; margin: 14px 0 6px; font-size: var(--ph-fs-2); color: var(--ph-text-2); }

.ph-legal .pr-topup-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.ph-legal .pr-topup-row .pr-amt-input { flex: 1 1 12rem; max-width: none; }

.ph-legal .pr-topup-go {
  display: flex;
  flex: 1 1 12rem;
  min-height: 48px;
}

/* ---------- who is it for ---------- */
.ph-legal .pr-who {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ph-legal .pr-who-card {
  padding: 18px;
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-2);
  background: var(--pr-surface);
  min-width: 0;
}

.ph-legal .pr-who-card h3 { margin: 0; font-size: var(--ph-fs-3); color: var(--ph-text); }
.ph-legal .pr-who-card p { margin: 8px 0 0; line-height: 1.85; color: var(--ph-text-2); font-size: var(--ph-fs-2); }
.ph-legal .pr-who-moment { color: var(--pr-warm-ink) !important; font-weight: 700; font-size: var(--ph-fs-2) !important; margin-top: 4px !important; }
.ph-legal .pr-who-example { color: var(--ph-text) !important; }
.ph-legal .pr-who-links { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- comparison table ---------- */
.ph-legal .pr-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 34rem;
  font-size: var(--ph-fs-3);
}

.ph-legal .pr-table th,
.ph-legal .pr-table td {
  padding: 12px 14px;
  border-block-end: 1px solid var(--ph-line);
  text-align: center;
  color: var(--ph-text);
}

.ph-legal .pr-table thead th { background: var(--pr-surface-2); font-weight: 700; }
.ph-legal .pr-table tbody th { text-align: start; font-weight: 400; }

.ph-legal .pr-table tbody tr:last-child th,
.ph-legal .pr-table tbody tr:last-child td { border-block-end: 0; }

.ph-legal .pr-col-hot { background: var(--pr-accent-soft); font-weight: 700; }

/* ---------- the real sample: a sheet of paper in both themes ---------- */
.ph-legal .pr-paper {
  margin: 0;
  padding: clamp(16px, 3.4vw, 30px);
  border-radius: 6px;
  background: var(--ph-paper);
  color: var(--ph-sheet-ink);
  box-shadow: var(--pr-shadow), 0 0 0 1px var(--ph-sheet-line);
  font-size: var(--ph-fs-2);
  line-height: 1.95;
  max-width: 46rem;
}

.ph-legal .pr-paper-head { border-block-end: 1.5px solid var(--ph-sheet-ink); padding-block-end: 10px; margin-block-end: 12px; }
.ph-legal .pr-paper-basmale { margin: 0 0 8px; text-align: center; font-weight: 700; }

.ph-legal .pr-paper-meta {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, auto));
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0;
}

.ph-legal .pr-paper-meta div { display: flex; gap: 6px; }
.ph-legal .pr-paper-meta dt { color: var(--ph-sheet-ink-2); }
.ph-legal .pr-paper-meta dd { margin: 0; font-weight: 700; }
.ph-legal .pr-paper-guide { margin: 8px 0 0; color: var(--ph-sheet-ink-2); font-size: var(--ph-fs-2); }

.ph-legal .pr-q { padding-block: 10px; border-block-end: 1px dashed var(--ph-sheet-line); }
.ph-legal .pr-q-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.ph-legal .pr-q-n { font-weight: 700; }
.ph-legal .pr-q-ask { margin: 0; font-weight: 700; }
.ph-legal .pr-q-barom { white-space: nowrap; font-size: var(--ph-fs-1); color: var(--ph-sheet-ink-2); border: 1px solid var(--ph-sheet-line); border-radius: 6px; padding: 0 6px; }
.ph-legal .pr-q-items { list-style: none; margin: 6px 0 0; padding-inline-start: 1.6rem; }
.ph-legal .pr-q-items li { margin: 4px 0; }
.ph-legal .pr-q-idx { color: var(--ph-sheet-ink-2); }
.ph-legal .pr-q-opts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-block-start: 2px; color: var(--ph-sheet-ink-2); }
.ph-legal .pr-q-column { margin: 6px 0 0; padding-inline-start: 1.6rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ph-legal .pr-q-column > span:first-child { color: var(--ph-sheet-ink-2); }
.ph-legal .pr-q-chip { border: 1px solid var(--ph-sheet-line); border-radius: 6px; padding: 0 8px; }

.ph-legal .pr-paper-more { margin-block-start: 6px; }
.ph-legal .pr-paper-more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-weight: 700;
  color: var(--ph-sheet-link);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.ph-legal .pr-paper-key { margin: 10px 0 0; color: var(--ph-sheet-ink-2); font-size: var(--ph-fs-2); }
.ph-legal .pr-paper a:focus-visible,
.ph-legal .pr-paper summary:focus-visible { outline: 2px solid var(--ph-sheet-link); outline-offset: 3px; }

/* ---------- FAQ ---------- */
.ph-legal .pr-faq details {
  margin-block: 8px;
  padding: 4px 18px;
  border: 1px solid var(--ph-line);
  border-radius: 16px;
  background: var(--pr-surface);
}

.ph-legal .pr-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
  font-weight: 700;
  color: var(--ph-text);
  list-style: none;
}

.ph-legal .pr-faq summary::-webkit-details-marker { display: none; }

.ph-legal .pr-faq summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-inline-end: 2px solid var(--ph-text-2);
  border-block-end: 2px solid var(--ph-text-2);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.ph-legal .pr-faq details[open] summary::after { transform: rotate(-135deg); }

.ph-legal .pr-faq p {
  margin: 0 0 12px;
  color: var(--ph-text-2);
  font-size: var(--ph-fs-3);
  line-height: 1.95;
}

.ph-legal .pr-faq p strong { color: var(--ph-text); }

.ph-legal .pr-contact { margin-block-start: 28px; text-align: center; color: var(--ph-text-2); }

/* ---------- "what is in Nabgol" (auto-built from the catalogue) ---------- */
.ph-legal .pr-have-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-block: 6px 12px;
}

.ph-legal .pr-have-totals > div {
  padding: 16px 12px;
  border: 1px solid var(--ph-line);
  border-radius: 18px;
  background: var(--pr-surface);
  text-align: center;
}

.ph-legal .pr-have-totals strong { display: block; font-size: var(--ph-fs-5); color: var(--ph-text); }
.ph-legal .pr-have-totals span { font-size: var(--ph-fs-2); color: var(--ph-text-2); }
.ph-legal .pr-have-h { margin: 18px 0 8px; font-size: var(--ph-fs-3); color: var(--ph-text); }

.ph-legal .pr-have-level,
.ph-legal .pr-have-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 6px 0;
}

.ph-legal .pr-have-lname { min-width: 6.5rem; color: var(--ph-text-2); font-size: var(--ph-fs-2); }

.ph-legal .pr-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 3px 12px;
  border: 1px solid var(--ph-line);
  border-radius: 999px;
  background: var(--pr-surface);
  color: var(--ph-text);
  font-size: var(--ph-fs-2);
}

.ph-legal main a.pr-chip { color: var(--ph-text); text-decoration: none; }
.ph-legal a.pr-chip:hover { border-color: var(--pr-accent-line); }
.ph-legal main a.pr-chip-more { color: var(--pr-accent); }

/* ---------- checkout window: small, centred, never a curtain over the page (§9-پ rule 4) ---------- */
.ph-legal .pr-dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--ph-line);
  border-radius: 20px;
  background: var(--pr-solid);
  color: var(--ph-text);
  box-shadow: var(--pr-shadow);
  overflow: auto;
}

.ph-legal .pr-dialog::backdrop { background: var(--ph-scrim); }

.ph-legal .pr-co { padding: 22px 20px 18px; }
.ph-legal .pr-co-kicker { margin: 0; font-size: var(--ph-fs-1); font-weight: 700; color: var(--pr-warm-ink); }
.ph-legal .pr-co-title { margin: 4px 0 4px; font-size: var(--ph-fs-4); font-weight: 700; color: var(--ph-text); }
.ph-legal .pr-co-detail { margin: 0; color: var(--ph-text-2); font-size: var(--ph-fs-2); line-height: 1.8; }

.ph-legal .pr-co-lines { margin: 14px 0 0; padding: 0; }
.ph-legal .pr-co-line { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-block-end: 1px solid var(--ph-line); }
.ph-legal .pr-co-line[hidden] { display: none; }
.ph-legal .pr-co-line dt { color: var(--ph-text-2); }
.ph-legal .pr-co-line dd { margin: 0; color: var(--ph-text); font-weight: 700; }
.ph-legal .pr-co-total { border-block-end: 0; }
.ph-legal .pr-co-total dt { color: var(--ph-text); font-weight: 700; }
.ph-legal .pr-co-total dd { font-size: var(--ph-fs-3); font-weight: 700; }

.ph-legal .pr-co-gift { margin: 6px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--pr-warm-soft); color: var(--ph-text); font-size: var(--ph-fs-2); line-height: 1.8; }
.ph-legal .pr-co-msg { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--pr-bad-soft); color: var(--pr-bad); font-size: var(--ph-fs-2); line-height: 1.8; }
.ph-legal .pr-co-gift[hidden],
.ph-legal .pr-co-msg[hidden] { display: none; }

.ph-legal .pr-co-actions { display: flex; gap: 10px; margin-block-start: 16px; }
.ph-legal .pr-co-pay { flex: 1; min-height: 48px; }
.ph-legal .pr-co-cancel { min-height: 48px; }
.ph-legal .pr-co-fine { margin: 12px 0 0; font-size: var(--ph-fs-1); color: var(--ph-text-2); line-height: 1.8; text-align: center; }

/* ---------- /pay_callback.php ---------- */
.ph-legal .pay-card {
  max-width: 34rem;
  margin: clamp(8px, 2vh, 24px) auto 0;
  padding: clamp(22px, 4vw, 34px) clamp(18px, 4vw, 30px);
  border: 1px solid var(--ph-line);
  border-radius: var(--ph-r-2);
  background: var(--pr-surface);
  text-align: center;
}

.ph-legal .pay-mark {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pr-accent-soft);
  color: var(--pr-accent);
  border: 1px solid var(--pr-accent-line);
}

.ph-legal .pay-mark svg { width: 28px; height: 28px; }
.ph-legal .pay-card.pay-failed .pay-mark,
.ph-legal .pay-card.pay-invalid .pay-mark { background: var(--pr-bad-soft); color: var(--pr-bad); border-color: var(--pr-bad); }
.ph-legal .pay-card.pay-pending .pay-mark { background: var(--pr-warm-soft); color: var(--pr-pending); border-color: var(--pr-warm-line); }

.ph-legal .pay-title { margin: 14px 0 8px; font-size: var(--ph-fs-5); font-weight: 700; color: var(--ph-text); }
.ph-legal .pay-lead { margin: 0 auto; max-width: 28rem; color: var(--ph-text-2); line-height: 1.95; }

.ph-legal .pay-got {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 18px 0 0;
  padding: 14px;
  border-radius: 16px;
  background: var(--pr-accent-soft);
}

.ph-legal .pay-got span { color: var(--ph-text-2); font-size: var(--ph-fs-2); }
.ph-legal .pay-got strong { color: var(--ph-text); font-size: var(--ph-fs-4); font-weight: 700; }
.ph-legal .pay-gift { margin: 8px 0 0; color: var(--pr-warm-ink); font-weight: 700; }

.ph-legal .pay-receipt { margin: 18px 0 0; padding: 0; text-align: start; }
.ph-legal .pay-receipt div { display: flex; justify-content: space-between; gap: 14px; padding-block: 9px; border-block-end: 1px solid var(--ph-line); }
.ph-legal .pay-receipt div:last-child { border-block-end: 0; }
.ph-legal .pay-receipt dt { color: var(--ph-text-2); }
.ph-legal .pay-receipt dd { margin: 0; color: var(--ph-text); font-weight: 700; text-align: end; }

.ph-legal .pay-fine { margin: 14px 0 0; font-size: var(--ph-fs-2); color: var(--ph-text-2); line-height: 1.85; }
.ph-legal .pay-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-block-start: 20px; }
.ph-legal .pay-actions .ph-btn { min-height: 48px; min-width: 9rem; }
.ph-legal .pay-help { margin: 18px 0 0; font-size: var(--ph-fs-2); color: var(--ph-text-2); }

/* ---------- widths ---------- */
@media (max-width: 960px) {
  .ph-legal .pr-ways { grid-template-columns: 1fr 1fr; }
  .ph-legal .pr-way-free { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  /* the comparison fits the phone: the three columns stay aligned under their names, each row's
     name on its own line above them — no sideways scrolling, same cells */
  .ph-legal .pr-table, .ph-legal .pr-table thead, .ph-legal .pr-table tbody { display: block; min-width: 0; }
  .ph-legal .pr-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-legal .pr-table thead th:first-child { display: none; }
  .ph-legal .pr-table thead th { padding: 10px 6px; }
  .ph-legal .pr-table tbody th { grid-column: 1 / -1; padding: 12px 12px 2px; border-block-end: 0; font-weight: 700; }
  .ph-legal .pr-table td { padding: 4px 6px 12px; }
  .ph-legal .pr-ways,
  .ph-legal .pr-who { grid-template-columns: 1fr; }
  .ph-legal .pr-grid { grid-template-columns: 1fr; gap: 20px; }
  .ph-legal .pr-tile { padding-block: 24px 18px; }
  .ph-legal .pr-buy { min-height: 50px; }
  .ph-legal .pr-gift { flex-wrap: wrap; }
  .ph-legal .pr-gift-cta { width: 100%; }
  .ph-legal .pr-topup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-legal .pr-paper-meta { grid-template-columns: repeat(3, minmax(0, auto)); }
  .ph-legal .pr-have-totals > div { padding: 12px 6px; } /* three numbers side by side: one block, not three tall cards */
  .ph-legal .pr-table .pr-col-hot { background: transparent; font-weight: 700; } /* on the phone the Plus column is marked by weight: a tint on the value cells alone broke into blocks */
  .ph-legal .pr-have-lname { min-width: 100%; }
  .ph-legal .pr-co-actions { flex-direction: column-reverse; }
  .ph-legal .pay-actions .ph-btn { flex: 1 1 100%; }
  .ph-legal .pay-card { padding-block-start: 22px; } /* the result sits right under the header on a phone */
  .ph-legal .pr-trust { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .ph-legal .pr-faq summary::after { transition: none; }
}