/* ==========================================================================
   Montiliya — plans, subscriptions and credits (js/billing.js)
   The same black-and-white system as the rest of the app: tokens from styles.css, no accent colour, no gradients; the recommended (or current) plan is the one whose
   header is inverted. Red appears only for a failed payment and an empty balance. Logical properties everywhere: LTR and RTL share this file. The global
   prefers-reduced-motion rule of styles.css cuts every transition here to ~0.
   ========================================================================== */

/* the card greys swap with the theme: the shell sits on the page, the card body is raised on it, the price box is inset in the body */
.pricing, #prof-billing, #bill-dlg, .pop-bill { --plan-shell: var(--panel); --plan-card: var(--panel-2); --plan-inset: var(--panel); --plan-hl: var(--ink); --plan-hl-ink: var(--on-ink); }
:root[data-theme='light'] .pricing, :root[data-theme='light'] #prof-billing, :root[data-theme='light'] #bill-dlg, :root[data-theme='light'] .pop-bill { --plan-shell: var(--panel-2); --plan-card: var(--panel); --plan-inset: var(--panel-2); }

/* small shared pieces */
.btn-quiet { background: var(--panel-3); color: var(--ink-2); }
.btn-quiet:hover { background: var(--hover); color: var(--ink); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); background: var(--danger-bg); }
.bill-mock-tag { display: inline-flex; align-items: center; height: 20px; padding-inline: var(--s2); border-radius: var(--r-full); border: 1px dashed var(--line-strong); color: var(--ink-3); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
:lang(ar) .bill-mock-tag { letter-spacing: 0; text-transform: none; }
.st-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding-inline: 10px; border-radius: var(--r-full); border: 1px solid var(--line-strong); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.st-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-ok { color: var(--ink); }
.st-warn { color: var(--ink-2); border-style: dashed; }
.st-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.st-muted { color: var(--ink-3); }
.ph { color: var(--ink-3); font-size: var(--fs-xs); font-style: italic; }
.plus { font-weight: 650; }
.toast .toast-act { margin-inline-start: var(--s2); color: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* the credits chip: a dot when the balance runs low (a ring) or is empty (filled) */
.credits[data-level] { position: relative; }
.credits[data-level]::after { content: ''; position: absolute; inset-block-start: 4px; inset-inline-end: 6px; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--danger); background: var(--panel); }
.credits[data-level='empty']::after { background: var(--danger); }

/* ---- pricing page (#/pricing) ---------------------------------------------------------------------------- */
.pricing { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--s10) var(--s6) var(--s12); }
.pr-inner { container-type: inline-size; width: 100%; max-width: 1040px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--s10); animation: pr-in var(--t-slow) var(--ease) both; }
@keyframes pr-in { from { opacity: 0; transform: translateY(8px); } }
.pr-head { display: flex; flex-direction: column; align-items: center; gap: var(--s4); text-align: center; }
.pr-flag { margin: 0; display: inline-flex; align-items: center; height: 26px; padding-inline: var(--s3); border-radius: var(--r-full); border: 1px dashed var(--line-strong); color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; }
.pr-head h1 { margin: 0; font-size: clamp(2rem, 1.4rem + 2.2vw, 2.875rem); font-weight: 550; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.pr-head h1:focus { outline: none; }
:lang(ar) .pr-head h1 { letter-spacing: 0; line-height: 1.3; font-weight: 600; }
.pr-lead { margin: 0; max-width: 58ch; color: var(--ink-3); font-size: var(--fs-lg); line-height: 1.5; text-wrap: pretty; }
.pr-toggle { display: inline-flex; gap: 2px; padding: 3px; margin-top: var(--s2); border-radius: var(--r-full); background: var(--plan-shell); border: 1px solid var(--line-strong); }
.pr-toggle button { display: inline-flex; align-items: center; gap: var(--s2); min-height: 38px; padding-inline: var(--s4); border-radius: var(--r-full); border: 1px solid transparent; color: var(--ink-3); font-size: var(--fs-sm); font-weight: 600; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.pr-toggle button:hover { color: var(--ink); }
.pr-toggle button[aria-checked='true'] { background: var(--plan-card); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-1); }
.pr-save { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
.pr-save i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }

/* the account's situation (also used in the settings) */
.bill-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3) var(--s5); padding: var(--s4) var(--s5); border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--plan-shell); animation: pop-in var(--t-med) var(--ease); }
.bill-banner.danger { border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: var(--danger-bg); }
.bill-banner.warn { border-style: dashed; }
.bb-text { min-width: 0; flex: 1 1 280px; }
.bb-title { margin: 0; font-weight: 650; color: var(--ink); }
.bill-banner.danger .bb-title { color: var(--danger); }
.bb-sub { margin: 2px 0 0; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.5; text-wrap: pretty; }
.bb-acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.bb-acts .btn { min-height: 40px; font-size: var(--fs-sm); }

/* plan cards: a shell with the plan's name, a raised body, an inset price box (the reference's structure, in Montiliya's greys) */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: stretch; }
.plan { display: flex; flex-direction: column; border-radius: 22px; background: var(--plan-shell); border: 1px solid var(--line); padding: 0 5px 5px; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 54px; padding: var(--s3) var(--s4); }
.plan-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; }
.plan-tag { display: inline-flex; align-items: center; height: 24px; padding-inline: 10px; border-radius: var(--r-full); border: 1px solid var(--line-strong); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.plan-body { flex: 1; display: flex; flex-direction: column; gap: var(--s5); padding: var(--s5); border-radius: 18px; background: var(--plan-card); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.plan-desc { margin: 0; min-height: 3em; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; text-wrap: pretty; }
.plan-price { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border-radius: 14px; background: var(--plan-inset); border: 1px solid var(--line); }
.plan-amount { display: flex; align-items: flex-start; gap: 6px; margin: 0; direction: ltr; justify-content: flex-start; }
[dir='rtl'] .plan-amount { justify-content: flex-end; }
.pa-cur { margin-top: 5px; color: var(--ink-3); font-size: 1.375rem; font-weight: 400; }
.pa-val { font-size: 2.75rem; line-height: 1; font-weight: 450; letter-spacing: -0.04em; color: var(--ink); }
.pa-per { margin-top: 7px; margin-inline-start: 2px; color: var(--ink-3); font-size: 0.6875rem; line-height: 1.25; font-weight: 500; }
.plan-billed { margin: 0; min-height: 1.4em; color: var(--ink-3); font-size: var(--fs-xs); }
.plan-cta { width: 100%; min-height: 42px; font-size: var(--fs-sm); }
.plan-feat { list-style: none; margin: 0; padding: 0 2px; display: flex; flex-direction: column; gap: var(--s3); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.plan-feat li { display: flex; align-items: flex-start; gap: var(--s3); }
.plan-feat .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ink); stroke-width: 2.2; }
.plan:hover { transform: translateY(-2px); }
/* the plan to look at (the current one, else the recommended one): an inverted header, the card lifted */
.plan.is-hl { background: var(--plan-hl); border-color: var(--plan-hl); box-shadow: var(--shadow-pop); transform: translateY(-8px); }
.plan.is-hl:hover { transform: translateY(-10px); }
.plan.is-hl .plan-head { color: var(--plan-hl-ink); }
.plan.is-hl .plan-tag { color: var(--plan-hl-ink); border-color: color-mix(in srgb, var(--plan-hl-ink) 40%, transparent); }
.plan.is-hl .plan-body { border-color: transparent; }

/* credit packs */
.pr-packs { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--s5) var(--s8); align-items: center; padding: var(--s6); border-radius: 22px; background: var(--plan-shell); border: 1px solid var(--line); }
.pr-sec-text h2, .pr-how h2, .pr-faq h2 { margin: 0 0 var(--s2); font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.02em; }
.pr-sec-text p { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.55; text-wrap: pretty; }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.pack { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: var(--s4); border-radius: var(--r-lg); border: 1px solid var(--line-strong); background: var(--plan-card); color: var(--ink); text-align: start; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.pack:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.pack[aria-checked='true'] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pack-n { font-size: 1.875rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }
.pack-l { color: var(--ink-3); font-size: var(--fs-xs); }
.pack-p { margin-top: var(--s3); font-weight: 650; }
.pack-u { color: var(--ink-3); font-size: var(--fs-xs); }
.pack-tag { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; padding: 2px 8px; border-radius: var(--r-full); background: var(--ink); color: var(--on-ink); font-size: 0.6875rem; font-weight: 650; white-space: nowrap; }
.pack-check { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); color: transparent; transition: background-color var(--t-fast) var(--ease); }
.pack-check .icon { width: 13px; height: 13px; stroke-width: 2.8; }
.pack[aria-checked='true'] .pack-check { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.pr-packs-go { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); }
.pr-packs-sum { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }

/* how credits work */
.how-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.how { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--plan-shell); }
.how-ic { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--s1); border-radius: var(--r-md); background: var(--plan-card); border: 1px solid var(--line); color: var(--ink); }
.how-ic .icon { width: 18px; height: 18px; }
.how h3 { margin: 0; font-size: var(--fs-md); font-weight: 650; }
.how p { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.55; text-wrap: pretty; }
.how-costs { display: grid; gap: 4px; margin: var(--s2) 0 0; font-size: var(--fs-sm); }
.how-costs div { display: flex; justify-content: space-between; gap: var(--s2); padding-block: 3px; border-bottom: 1px dashed var(--line); }
.how-costs dt { color: var(--ink-3); }
.how-costs dd { margin: 0; font-weight: 600; }

/* questions */
.pr-faq { max-width: 760px; width: 100%; margin-inline: auto; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 56px; padding-block: var(--s3); cursor: pointer; list-style: none; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ink); }
.faq-chev { flex: none; width: 18px; height: 18px; color: var(--ink-3); transition: transform var(--t-fast) var(--ease); }
.faq[open] .faq-chev { transform: rotate(180deg); }
.faq p { margin: 0 0 var(--s4); color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.6; max-width: 66ch; animation: pop-in var(--t-fast) var(--ease); }
.pr-foot { margin: 0; text-align: center; color: var(--ink-3); font-size: var(--fs-xs); }

@container (max-width: 860px) {
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 460px; width: 100%; margin-inline: auto; }
  .plan.is-hl, .plan.is-hl:hover { transform: none; }
  .plan-desc { min-height: 0; }
  .pr-packs { grid-template-columns: minmax(0, 1fr); }
  .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 520px) {
  .packs { grid-template-columns: minmax(0, 1fr); }
  .pack { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); padding-inline-end: 56px; }
  .pack-p { margin-top: 0; margin-inline-start: auto; }
  .pack-u { flex-basis: 100%; }
  .pack-tag { position: static; order: 5; }
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .pr-packs-go .btn { width: 100%; }
}
@media (max-width: 640px) { .pricing { padding: var(--s6) var(--s4) var(--s10); } .pr-inner { gap: var(--s8); } }

/* ---- billing in the settings (#/settings, #/billing) ----------------------------------------------------- */
#prof-billing { display: flex; flex-direction: column; gap: var(--s5); scroll-margin-top: var(--s4); }
.bill-mock { display: flex; align-items: center; gap: var(--s2); margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }
.bill-card h2 { margin: 0; }
.bs-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.bs-plan { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.bs-plan-name { margin: 0; font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.02em; }
.bs-plan-sub { margin: 2px 0 0; color: var(--ink-3); font-size: var(--fs-sm); }
.bs-price { margin: 0; font-size: var(--fs-xl); font-weight: 600; }
.bs-price span { margin-inline-start: 4px; color: var(--ink-3); font-size: var(--fs-sm); font-weight: 500; }
.bs-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); margin: 0; }
.bs-dl div { padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--plan-inset); border: 1px solid var(--line); min-width: 0; }
.bs-dl dt { color: var(--ink-3); font-size: var(--fs-xs); }
.bs-dl dd { margin: 2px 0 0; font-weight: 600; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.bs-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.bs-actions .btn { min-height: 42px; font-size: var(--fs-sm); }
.bs-balance { display: flex; align-items: baseline; gap: var(--s2); margin: 0; }
.bs-balance strong { font-size: 2.5rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.bs-balance span { color: var(--ink-3); font-size: var(--fs-sm); }
.bs-meter { display: flex; height: 8px; border-radius: var(--r-full); overflow: hidden; background: var(--plan-inset); border: 1px solid var(--line); gap: 2px; }
.bs-meter span { display: block; height: 100%; min-width: 3px; transition: width var(--t-slow) var(--ease); }
.m-sub { background: var(--ink); }
.m-pur { background: var(--ink-3); }
.m-oth { background: var(--line-strong); }
.bs-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s2) var(--s4); font-size: var(--fs-sm); }
.bs-parts li { display: flex; align-items: center; gap: var(--s2); color: var(--ink-2); }
.bs-parts b { margin-inline-start: auto; color: var(--ink); font-weight: 650; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.bs-used { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }
.bs-warn { margin: 0; padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px dashed var(--line-strong); color: var(--ink-2); font-size: var(--fs-sm); }
.bs-empty { margin: 0; color: var(--ink-3); font-size: var(--fs-sm); }
.bs-table-wrap { overflow-x: auto; margin-inline: calc(var(--s2) * -1); }
.bs-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.bs-table th { padding: var(--s2); text-align: start; color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bs-table td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); vertical-align: middle; }
.bs-table tr:last-child td { border-bottom: 0; }
.bs-table .num { text-align: end; font-weight: 600; white-space: nowrap; }
.bs-inv { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.bs-usage { list-style: none; margin: 0; padding: 0; }
.bs-usage li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); row-gap: 2px; padding-block: var(--s3); border-bottom: 1px solid var(--line); }
.bs-usage li:last-child { border-bottom: 0; }
.us-t { font-size: var(--fs-sm); font-weight: 500; overflow-wrap: anywhere; }
.us-proj { color: var(--ink-3); font-weight: 400; }
.us-d { grid-row: 2; color: var(--ink-3); font-size: var(--fs-xs); }
.us-n { grid-column: 2; grid-row: 1; text-align: end; font-weight: 650; font-size: var(--fs-sm); }
.us-in .us-n { color: var(--ink); }
.us-out .us-n { color: var(--ink-2); }
.us-b { grid-column: 2; grid-row: 2; text-align: end; color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.bs-more { align-self: flex-start; min-height: 38px; font-size: var(--fs-sm); }
@media (max-width: 560px) {
  .bs-table thead { display: none; }
  .bs-table, .bs-table tbody, .bs-table tr, .bs-table td { display: block; }
  .bs-table tr { padding-block: var(--s2); border-bottom: 1px solid var(--line); }
  .bs-table td { display: flex; justify-content: space-between; gap: var(--s3); padding: 3px var(--s2); border: 0; }
  .bs-table td::before { content: attr(data-l); color: var(--ink-3); font-size: var(--fs-xs); }
  .bs-table .num { text-align: end; }
}

/* ---- the credits popover ------------------------------------------------------------------------------- */
.pop.pop-credits.pop-bill { width: min(320px, calc(100vw - 32px)); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); color: var(--ink-2); }
.cp-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.cp-k { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
:lang(ar) .cp-k { letter-spacing: 0; text-transform: none; }
.bill-mock-tag.small { height: 18px; font-size: 0.625rem; }
.cp-total { display: flex; align-items: baseline; gap: var(--s2); margin: 0; }
.cp-total strong { margin: 0; font-size: 2.25rem; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.cp-total span { color: var(--ink-3); font-size: var(--fs-sm); }
.cp-warn { margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-md); border: 1px dashed var(--line-strong); font-size: var(--fs-sm); color: var(--ink-2); }
.cp-warn.danger { border-style: solid; border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); background: var(--danger-bg); }
.cp-plan { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }
.cp-rows { display: grid; gap: 6px; margin: 0; font-size: var(--fs-sm); }
.cp-rows div { display: flex; justify-content: space-between; gap: var(--s3); }
.cp-rows dt { color: var(--ink-3); }
.cp-rows dd { margin: 0; color: var(--ink); font-weight: 600; }
.cp-buy { width: 100%; min-height: 42px; margin-top: var(--s1); font-size: var(--fs-sm); }
.cp-links { display: flex; justify-content: center; gap: var(--s5); font-size: var(--fs-sm); }
.cp-links a { color: var(--ink-2); text-underline-offset: 3px; }
.cp-links a:hover { color: var(--ink); text-decoration: underline; }

/* ---- the billing dialog (checkout, results, plan change, cancel, out of credits, buy credits) -------------- */
#bill-dlg { width: min(520px, calc(100vw - 32px)); }
.bd { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s6); }
.bd-head { display: flex; align-items: flex-start; gap: var(--s4); }
.bd-head > div { flex: 1; min-width: 0; }
.bd-head h2 { margin: 0; font-size: var(--fs-xl); font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; }
.bd-head h2:focus { outline: none; }
.bd-sub { margin: var(--s1) 0 0; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.5; text-wrap: pretty; }
.bd-tag { flex: none; margin-top: 4px; }
.bd-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--plan-shell); border: 1px solid var(--line-strong); color: var(--ink); }
.bd-ic .icon { width: 22px; height: 22px; }
.bd-ic.good { background: var(--ink); border-color: var(--ink); color: var(--on-ink); animation: bd-pop 420ms var(--ease) both; }
.bd-ic.good .icon { stroke-width: 2.6; stroke-dasharray: 24; stroke-dashoffset: 24; animation: bd-draw 360ms 160ms var(--ease) forwards; }
.bd-ic.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-bg); }
@keyframes bd-pop { from { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.06); } }
@keyframes bd-draw { to { stroke-dashoffset: 0; } }
.bd-dl { display: grid; gap: 0; margin: 0; padding-block: var(--s2); border-block: 1px solid var(--line); font-size: var(--fs-sm); }
.bd-dl div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding-block: 7px; }
.bd-dl dt { color: var(--ink-3); }
.bd-dl dd { margin: 0; font-weight: 500; text-align: end; color: var(--ink); overflow-wrap: anywhere; }
.bd-muted { color: var(--ink-3); font-weight: 400; font-size: var(--fs-xs); }
.bd-note { margin: 0; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.5; }
.bd-list { margin: 0; padding-inline-start: 1.2em; display: flex; flex-direction: column; gap: var(--s2); color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.bd-mock { display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px dashed var(--line-strong); background: var(--plan-inset); color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.5; }
.bd-mock strong { color: var(--ink-2); font-size: var(--fs-sm); }
.bd-err { margin: 0; padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid var(--danger); color: var(--danger); font-size: var(--fs-sm); }
.bd-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--s2); }
.bd-actions .btn { min-height: 42px; font-size: var(--fs-sm); }
.bd-actions .btn[aria-busy='true'] { cursor: progress; }
.bd .packs.in-dlg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bd .packs.in-dlg .pack { padding: var(--s3); }
.bd .packs.in-dlg .pack-tag { inset-block-start: 8px; inset-inline-end: 8px; }
.bd .packs.in-dlg .pack-n { font-size: 1.5rem; }
@media (max-width: 520px) {
  .bd { padding: var(--s5); }
  .bd .packs.in-dlg { grid-template-columns: minmax(0, 1fr); }
  .bd .packs.in-dlg .pack { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); padding-inline-end: 48px; }
  .bd .packs.in-dlg .pack-p { margin-top: 0; margin-inline-start: auto; }
  .bd .packs.in-dlg .pack-u { flex-basis: 100%; }
  .bd .packs.in-dlg .pack-tag { position: static; order: 5; }
  .bd-actions .btn { flex: 1 1 auto; }
}
@media (forced-colors: active) {
  .pack[aria-checked='true'], .pr-toggle button[aria-checked='true'] { outline: 2px solid Highlight; }
}

/* the checkout of the mock: the successful payment as the one wide action, the other two under it */
.bd-actions.stack { flex-direction: column; align-items: stretch; }
.bd-actions.stack > .btn { width: 100%; min-height: 46px; }
.bd-row { display: flex; gap: var(--s2); }
.bd-row .btn { flex: 1 1 0; }

/* back from the provider's checkout: waiting for the server to confirm the payment */
.bd-wait { display: block; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line-strong); border-top-color: var(--ink); animation: bd-spin 900ms linear infinite; }
@keyframes bd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bd-wait { animation-duration: 2400ms; } }