/* Subscription page, payment status page and limited-access page.
   Uses the shared theme tokens (dark default, [data-theme="light"] overrides). */
.sb-page, .sb-status, .sb-limited {
  --sb-ok: #34c58a; --sb-bad: #ff6b6f; --sb-warn: #f0a630;
  --sb-radius: 1.75rem; --sb-radius-sm: 1.1rem;
  --sb-glass: color-mix(in srgb, var(--mh-surface-strong) 82%, transparent);
  --sb-line: var(--mh-card-border);
  position: relative; z-index: 1; color: var(--mh-text);
}
[data-theme="light"] .sb-page, [data-theme="light"] .sb-status, [data-theme="light"] .sb-limited {
  --sb-ok: #16825a; --sb-bad: #c9373c; --sb-warn: #9a5b00;
  --sb-glass: color-mix(in srgb, #ffffff 88%, transparent);
  --sb-line: rgba(15, 23, 42, 0.1);
}
.sb-glow {
  position: absolute; inset: -20% -10% auto -10%; height: 38rem;
  background:
    radial-gradient(38rem 20rem at 20% 20%, color-mix(in srgb, var(--mh-accent) 18%, transparent), transparent 70%),
    radial-gradient(30rem 18rem at 85% 10%, color-mix(in srgb, var(--mh-accent-secondary) 14%, transparent), transparent 70%);
  filter: blur(8px);
}
.sb-page { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.sb-page :focus-visible, .sb-status :focus-visible, .sb-limited :focus-visible { outline: 2px solid var(--mh-accent); outline-offset: 3px; }
.sb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sb-num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

/* Hero */
.sb-hero { display: grid; justify-items: center; text-align: center; gap: .9rem; max-width: 52rem; }
.sb-title { font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.sb-subtitle { color: var(--mh-muted-strong); font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.7; max-width: 42rem; text-wrap: pretty; }
.sb-meta { display: grid; justify-items: center; gap: .35rem; }
.sb-region { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
  border: 1px solid var(--sb-line); background: var(--sb-glass); color: var(--mh-muted-strong); }
.sb-region--egp { color: var(--mh-accent); border-color: color-mix(in srgb, var(--mh-accent) 40%, transparent); }
.sb-region-note { font-size: .82rem; color: var(--mh-muted); max-width: 34rem; }
.sb-notice, .sb-alert { padding: .75rem 1rem; border-radius: var(--sb-radius-sm); font-size: .92rem; line-height: 1.55; max-width: 40rem; }
.sb-notice { border: 1px solid color-mix(in srgb, var(--mh-accent) 35%, transparent); background: color-mix(in srgb, var(--mh-accent) 9%, transparent); }
.sb-alert { border: 1px solid color-mix(in srgb, var(--sb-bad) 45%, transparent); background: color-mix(in srgb, var(--sb-bad) 10%, transparent); color: var(--mh-text); }

.sb-toggle { display: inline-flex; gap: .25rem; padding: .3rem; margin-top: .6rem; border-radius: 999px; border: 1px solid var(--sb-line); background: var(--sb-glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.sb-toggle__btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem 1.3rem; border-radius: 999px; font-weight: 700; font-size: .95rem;
  color: var(--mh-muted-strong); transition: background .2s, color .2s; text-decoration: none; }
.sb-toggle__btn[aria-pressed="true"] { background: linear-gradient(135deg, var(--mh-accent), color-mix(in srgb, var(--mh-accent-secondary) 82%, white)); color: #04131f; }
.sb-save { font-size: .72rem; font-weight: 800; padding: .12rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--sb-ok) 20%, transparent); color: var(--sb-ok); }
.sb-toggle__btn[aria-pressed="true"] .sb-save { background: rgba(4, 19, 31, .14); color: #04131f; }

/* Layout */
.sb-layout { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: clamp(1.5rem, 4vw, 2.75rem); align-items: start; }
@media (min-width: 1024px) { .sb-layout { grid-template-columns: minmax(0, 1fr) 23rem; } }
.sb-plans { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 700px) { .sb-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sb-plan { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.35rem, 3vw, 2rem); border-radius: var(--sb-radius);
  border: 1px solid var(--sb-line); background: linear-gradient(165deg, var(--mh-card-highlight, transparent), var(--sb-glass));
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  transition: border-color .25s, box-shadow .25s, transform .25s; min-width: 0; }
.sb-plan--featured { border-color: color-mix(in srgb, var(--mh-accent) 38%, transparent); }
.sb-plan.is-selected { border-color: var(--mh-accent); box-shadow: 0 0 0 1px var(--mh-accent), 0 22px 60px color-mix(in srgb, var(--mh-accent) 18%, transparent); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .sb-plan:hover { transform: translateY(-3px); } }
.sb-ribbon { position: absolute; inset-block-start: -0.8rem; inset-inline-end: 1.5rem; padding: .3rem .85rem; border-radius: 999px; font-size: .74rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(135deg, var(--mh-accent), var(--mh-accent-secondary)); color: #04131f; }
.sb-plan__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.sb-plan__name { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; }
.sb-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  border: 1px solid var(--sb-line); color: var(--mh-muted-strong); }
.sb-badge--web { color: var(--mh-accent-ink, var(--mh-accent)); border-color: color-mix(in srgb, var(--mh-accent) 45%, transparent); background: color-mix(in srgb, var(--mh-accent) 8%, transparent); }
.sb-plan__tagline { color: var(--mh-muted-strong); line-height: 1.55; }
.sb-price { display: grid; gap: .2rem; padding-block: .25rem .5rem; border-block-end: 1px solid var(--sb-line); }
.sb-price__was { color: var(--mh-muted); font-size: .95rem; }
.sb-price__amount { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; font-size: clamp(2.1rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.sb-price__amount--na { font-size: 1.1rem; color: var(--mh-muted); }
.sb-price__period { font-size: 1rem; font-weight: 600; color: var(--mh-muted); letter-spacing: 0; }
.sb-price__sub { color: var(--mh-muted); font-size: .88rem; }
.sb-features { display: grid; gap: .65rem; list-style: none; padding: 0; margin: 0; flex: 1; }
.sb-feature { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .6rem; align-items: start; line-height: 1.45; font-size: .95rem; }
.sb-feature__icon { margin-top: .12rem; color: var(--sb-ok); }
.sb-feature--off { color: var(--mh-muted); }
.sb-feature--off .sb-feature__icon { color: var(--mh-muted); opacity: .7; }
.sb-choose { width: 100%; min-height: 3rem; justify-content: center; text-decoration: none; }
.sb-choose[aria-pressed="true"] { pointer-events: none; }
.sb-plan:not(.sb-plan--featured) .sb-choose[aria-pressed="true"] { border-color: var(--mh-accent); color: var(--mh-accent); }

/* Summary */
.sb-summary { display: grid; gap: 1rem; padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--sb-radius); border: 1px solid var(--sb-line);
  background: var(--sb-glass); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  scroll-margin-top: calc(var(--mh-header-h, 5rem) + 1rem); }
@media (min-width: 1024px) { .sb-summary { position: sticky; top: calc(var(--mh-header-h, 5rem) + 1.25rem); } }
.sb-summary__title { font-size: 1.2rem; font-weight: 800; }
.sb-lines { display: grid; gap: .55rem; margin: 0; }
.sb-line { display: flex; justify-content: space-between; gap: 1rem; font-size: .93rem; }
.sb-line dt { color: var(--mh-muted); }
.sb-line dd { margin: 0; font-weight: 600; text-align: end; }
.sb-line--discount dd { color: var(--sb-ok); }
.sb-line--total { padding-top: .65rem; border-top: 1px dashed var(--sb-line); font-size: 1.05rem; }
.sb-line--total dt { color: var(--mh-text); font-weight: 700; }
.sb-line--total dd { font-weight: 800; font-size: 1.25rem; }
.sb-label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mh-muted); }
.sb-fine { font-size: .82rem; color: var(--mh-muted); line-height: 1.55; }
.sb-ok { font-size: .88rem; color: var(--sb-ok); font-weight: 600; }
.sb-bad { font-size: .88rem; color: var(--sb-bad); font-weight: 600; }
.sb-warn { font-size: .85rem; color: var(--sb-warn); }
.sb-link { color: var(--mh-accent-ink, var(--mh-accent)); font-weight: 600; font-size: .88rem; background: none; border: 0; padding: 0; cursor: pointer; text-underline-offset: 3px; min-height: 2rem; }
.sb-link:hover { text-decoration: underline; }
.sb-offer { display: grid; gap: .45rem; padding-top: .9rem; border-top: 1px solid var(--sb-line); }
.sb-offer__row { display: flex; gap: .5rem; }
.sb-offer__input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .06em; }
.sb-offer__apply { flex: none; padding-inline: 1.1rem; }
.sb-offer__status { display: grid; gap: .3rem; }
.sb-offer__status:empty { display: none; }
.sb-account { display: grid; gap: .45rem; padding-top: .9rem; border-top: 1px solid var(--sb-line); justify-items: start; }
.sb-account__who { display: flex; align-items: center; gap: .6rem; font-weight: 600; overflow-wrap: anywhere; }
.sb-avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 999px; font-weight: 800; font-size: .85rem;
  background: linear-gradient(135deg, var(--mh-accent), var(--mh-accent-secondary)); color: #04131f; }
.sb-pay { display: grid; gap: .5rem; }
.sb-pay__btn { width: 100%; min-height: 3.25rem; font-size: 1rem; justify-content: center; text-decoration: none; }
.sb-pay__btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.sb-secure { display: flex; gap: .5rem; align-items: flex-start; font-size: .8rem; color: var(--mh-muted); line-height: 1.5; }
.sb-secure svg { flex: none; margin-top: .1rem; color: var(--sb-ok); }

/* Compare + FAQ */
.sb-section { margin-top: clamp(2.5rem, 6vw, 4.5rem); display: grid; gap: 1.1rem; }
.sb-h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 800; text-align: center; }
.sb-table-wrap { overflow-x: auto; border-radius: var(--sb-radius); border: 1px solid var(--sb-line); background: var(--sb-glass); }
.sb-table { width: 100%; border-collapse: collapse; min-width: 34rem; font-size: .93rem; }
.sb-table th, .sb-table td { padding: .9rem 1rem; text-align: start; border-bottom: 1px solid var(--sb-line); }
.sb-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mh-muted); font-weight: 700; }
.sb-table tbody tr:last-child th, .sb-table tbody tr:last-child td { border-bottom: 0; }
.sb-table tbody th { font-weight: 700; }
.sb-table tr.is-selected { background: color-mix(in srgb, var(--mh-accent) 9%, transparent); }
.sb-yes { color: var(--sb-ok); font-weight: 800; }
.sb-no { color: var(--mh-muted); }
.sb-faq { display: grid; gap: .65rem; max-width: 50rem; margin-inline: auto; width: 100%; }
.sb-faq__item { border-radius: var(--sb-radius-sm); border: 1px solid var(--sb-line); background: var(--sb-glass); padding: 0 1.1rem; }
.sb-faq__item summary { cursor: pointer; list-style: none; padding: 1rem 0; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 3rem; }
.sb-faq__item summary::-webkit-details-marker { display: none; }
.sb-faq__item summary::after { content: "+"; font-size: 1.3rem; color: var(--mh-accent); line-height: 1; flex: none; }
.sb-faq__item[open] summary::after { content: "\2212"; }
.sb-faq__item p { padding-bottom: 1rem; color: var(--mh-muted-strong); line-height: 1.65; }
.sb-credit { text-align: center; font-size: .75rem; color: var(--mh-muted); }
.sb-credit a { text-decoration: underline; text-underline-offset: 2px; }

/* Status page */
.sb-status { padding-block: clamp(2.5rem, 7vw, 5rem); }
.sb-status__card { max-width: 38rem; margin-inline: auto; padding: clamp(1.75rem, 5vw, 3rem); border-radius: 2.2rem; text-align: center; display: grid; gap: 1.1rem; justify-items: center;
  border: 1px solid var(--sb-line); background: var(--sb-glass); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
.sb-status__icon { width: 5rem; height: 5rem; border-radius: 999px; display: grid; place-items: center; }
.sb-status__icon--ok { background: linear-gradient(135deg, var(--sb-ok), color-mix(in srgb, var(--mh-accent) 60%, var(--sb-ok))); color: #04131f;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--sb-ok) 12%, transparent), 0 18px 50px color-mix(in srgb, var(--sb-ok) 30%, transparent); }
.sb-status__icon--bad { background: color-mix(in srgb, var(--sb-bad) 14%, transparent); color: var(--sb-bad); }
.sb-status__icon--wait { background: color-mix(in srgb, var(--mh-accent) 12%, transparent); color: var(--mh-accent); }
.sb-status__title { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; line-height: 1.15; text-wrap: balance; }
.sb-status__body { color: var(--mh-muted-strong); line-height: 1.65; max-width: 30rem; }
.sb-status__facts { display: grid; gap: .45rem; width: 100%; max-width: 24rem; margin: 0; padding: 1rem 1.1rem; border-radius: var(--sb-radius-sm); border: 1px solid var(--sb-line); text-align: start; }
.sb-status__facts div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.sb-status__facts dt { color: var(--mh-muted); }
.sb-status__facts dd { margin: 0; font-weight: 700; text-align: end; overflow-wrap: anywhere; }
.sb-status__actions { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; width: 100%; }
.sb-status__actions > * { min-height: 3rem; justify-content: center; text-decoration: none; }
.sb-status__stores { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.sb-spinner { width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 3px solid color-mix(in srgb, var(--mh-accent) 25%, transparent); border-top-color: var(--mh-accent);
  animation: sb-spin 0.9s linear infinite; }
@keyframes sb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sb-spinner { animation-duration: 3s; } .sb-plan, .sb-toggle__btn { transition: none; } }
.sb-pop { animation: sb-pop .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sb-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sb-pop { animation: none; } }

/* Limited access (Pro app-only / exam-only) */
.sb-limited { padding-block: clamp(2rem, 6vw, 4.5rem); display: grid; gap: 1.25rem; max-width: 46rem; margin-inline: auto; }
.sb-limited__card { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 2rem; border: 1px solid var(--sb-line); background: var(--sb-glass); display: grid; gap: 1rem;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.sb-packs { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.sb-pack { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; border-radius: var(--sb-radius-sm); border: 1px solid var(--sb-line); }
.sb-pack__title { font-weight: 700; overflow-wrap: anywhere; }
.sb-locked { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; }
.sb-locked__icon { width: 3rem; height: 3rem; border-radius: 1rem; display: grid; place-items: center; background: color-mix(in srgb, var(--mh-accent) 12%, transparent); color: var(--mh-accent); }

/* Grid children must be allowed to shrink (the compare table scrolls inside its own box). */
.sb-section > *, .sb-layout > *, .sb-plans > *, .sb-hero > * { min-width: 0; max-width: 100%; }
.sb-page { overflow-x: clip; }

/* EGP equivalent for USD-priced visitors: present but deliberately quiet. */
.sb-price__equiv, .sb-equiv { font-size: .76rem; color: var(--mh-muted); opacity: .85; line-height: 1.45; }

/* ------------------------------------------------------------------ v5: checkout polish */
.sb-steps { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; align-items: center; gap: .35rem; flex-wrap: nowrap; max-width: 100%; }
.sb-step { display: flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 700; color: var(--mh-muted); white-space: nowrap; }
.sb-step + .sb-step::before { content: ""; width: clamp(1rem, 5vw, 2.6rem); height: 2px; border-radius: 2px; background: var(--sb-line); margin-inline-end: .35rem; }
.sb-step.is-done + .sb-step::before { background: linear-gradient(90deg, var(--mh-accent), var(--mh-accent-secondary)); }
[dir="rtl"] .sb-step.is-done + .sb-step::before { background: linear-gradient(270deg, var(--mh-accent), var(--mh-accent-secondary)); }
.sb-step__dot { width: 1.7rem; height: 1.7rem; border-radius: 999px; display: inline-grid; place-items: center; font-size: .78rem; flex: none;
  border: 2px solid var(--sb-line); color: var(--mh-muted); background: var(--sb-glass); }
.sb-step.is-done .sb-step__dot { border-color: transparent; color: #04131f; background: linear-gradient(135deg, var(--mh-accent), var(--mh-accent-secondary)); }
.sb-step.is-current { color: var(--mh-text); }
.sb-step.is-current .sb-step__dot { border-color: var(--mh-accent); color: var(--mh-accent-ink, var(--mh-accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mh-accent) 16%, transparent); }
@media (max-width: 420px) { .sb-step:not(.is-current) .sb-step__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

.sb-pick { display: grid; gap: .15rem; }
.sb-pick__name { font-weight: 800; font-size: 1.05rem; }
.sb-pick__access { color: var(--mh-muted); font-size: .88rem; }
.sb-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .6rem; padding-block: .6rem; border-block: 1px dashed var(--sb-line); }
.sb-total__was { color: var(--mh-muted); font-size: 1rem; }
.sb-total__now { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.sb-chip { display: inline-flex; align-items: center; padding: .2rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 800;
  color: var(--sb-ok); background: color-mix(in srgb, var(--sb-ok) 15%, transparent); border: 1px solid color-mix(in srgb, var(--sb-ok) 35%, transparent); }
.sb-info { font-size: .88rem; color: var(--mh-accent); font-weight: 600; }
.sb-bump { animation: sb-bump .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes sb-bump { 0% { transform: translateY(6px) scale(.96); opacity: .3; } 60% { transform: translateY(-2px) scale(1.04); opacity: 1; } 100% { transform: none; } }

.sb-code { border-radius: var(--sb-radius-sm); border: 1px solid var(--sb-line); padding: 0 .9rem; }
.sb-code[open] { padding-bottom: .9rem; }
.sb-code__toggle { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; min-height: 2.9rem; font-weight: 700; font-size: .92rem; color: var(--mh-accent-ink, var(--mh-accent)); }
.sb-code__toggle::-webkit-details-marker { display: none; }
.sb-code__toggle::after { content: ""; margin-inline-start: auto; width: .5rem; height: .5rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.sb-code[open] .sb-code__toggle::after { transform: rotate(225deg); }
.sb-code .sb-offer { border-top: 0; padding-top: 0; }
.sb-offer__status[aria-busy="true"] { opacity: .5; }

.sb-signin { display: grid; gap: .55rem; padding: 1rem; border-radius: var(--sb-radius-sm); scroll-margin-top: calc(var(--mh-header-h, 5rem) + 1rem);
  border: 1px solid color-mix(in srgb, var(--mh-accent) 35%, transparent); background: color-mix(in srgb, var(--mh-accent) 6%, transparent); }
.sb-signin__title { font-weight: 800; font-size: 1.02rem; }
.sb-signin__buttons { display: grid; gap: .5rem; margin-top: .2rem; }
.sb-social { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3rem; padding: .6rem 1rem; border-radius: 999px; font-weight: 700; font-size: .95rem;
  text-decoration: none; color: var(--mh-text); background: var(--mh-surface-strong); border: 1px solid var(--sb-line); transition: border-color .2s, transform .2s; }
.sb-social:hover { border-color: var(--mh-accent); }
@media (prefers-reduced-motion: no-preference) { .sb-social:active { transform: scale(.98); } }
[data-theme="light"] .sb-social { background: #fff; }
.sb-social--email svg { color: var(--mh-accent); }

.sb-pay__btn { position: relative; }
.sb-btn-spinner { display: none; width: 1.1rem; height: 1.1rem; border-radius: 999px; border: 2px solid rgba(4, 19, 31, .25); border-top-color: #04131f; animation: sb-spin .8s linear infinite; }
.sb-pay__btn.is-loading .sb-btn-spinner { display: inline-block; }
.sb-pay__btn.is-loading .sb-pay__lock { display: none; }
.sb-redirect-note { display: flex; gap: .5rem; align-items: flex-start; font-size: .8rem; color: var(--mh-muted); line-height: 1.5; }
.sb-redirect-note svg { flex: none; margin-top: .1rem; color: var(--mh-accent); }

.sb-bar { position: fixed; inset-inline: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; gap: .75rem;
  padding: .7rem .75rem .7rem 1rem; border-radius: 1.4rem; border: 1px solid var(--sb-line); background: color-mix(in srgb, var(--mh-surface-strong) 94%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
[data-theme="light"] .sb-bar { background: rgba(255, 255, 255, .96); box-shadow: 0 18px 50px rgba(15, 23, 42, .18); }
.sb-bar[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .sb-bar:not([hidden]) { animation: sb-rise .3s ease-out; } }
@keyframes sb-rise { from { transform: translateY(120%); } to { transform: none; } }
.sb-bar__info { display: grid; min-width: 0; flex: 1; }
.sb-bar__plan { font-size: .78rem; color: var(--mh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-bar__total { font-size: 1.15rem; font-weight: 800; }
.sb-bar__total s { font-size: .8rem; font-weight: 600; color: var(--mh-muted); }
.sb-bar__cta { flex: none; min-height: 2.9rem; padding-inline: 1.3rem; text-decoration: none; }
.sb-page.has-bar { padding-bottom: 6.5rem; }
@media (min-width: 1024px) { .sb-bar { display: none !important; } }

.sb-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(2, 8, 14, .6); backdrop-filter: blur(6px); }
.sb-overlay[hidden] { display: none; }
.sb-overlay__card { display: grid; justify-items: center; gap: .7rem; padding: 1.75rem 2rem; border-radius: 1.6rem; text-align: center; max-width: 22rem;
  background: var(--mh-surface-strong); border: 1px solid var(--sb-line); }
[data-theme="light"] .sb-overlay__card { background: #fff; }
.sb-overlay__title { font-weight: 800; font-size: 1.1rem; }

/* Status pages */
.sb-status__card { position: relative; overflow: hidden; }
.sb-success-badge { display: inline-flex; padding: .25rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .02em;
  color: var(--sb-ok); background: color-mix(in srgb, var(--sb-ok) 14%, transparent); }
.sb-progress { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; width: 100%; max-width: 20rem; text-align: start; }
.sb-progress li { display: flex; align-items: center; gap: .65rem; font-size: .92rem; color: var(--mh-muted); }
.sb-progress li::before { content: ""; width: .9rem; height: .9rem; border-radius: 999px; flex: none; border: 2px solid var(--sb-line); }
.sb-progress li.is-done { color: var(--mh-text); }
.sb-progress li.is-done::before { border-color: var(--sb-ok); background: var(--sb-ok); }
.sb-progress li.is-active { color: var(--mh-text); font-weight: 700; }
.sb-progress li.is-active::before { border-color: var(--mh-accent); border-top-color: transparent; animation: sb-spin .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .sb-progress li.is-active::before { animation: none; border-top-color: var(--mh-accent); } }
.sb-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sb-confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: sb-fall 2.8s cubic-bezier(.25, .6, .4, 1) forwards; }
@keyframes sb-fall {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), 520px, 0) rotate(var(--rot, 540deg)); }
}
@media (prefers-reduced-motion: reduce) { .sb-confetti { display: none; } }
.sb-bar__total { white-space: nowrap; }
.sb-bar__cta { min-width: 6.5rem; justify-content: center; }

/* ------------------------------------------------------------------ v7: subscription result + receipts (/subscriptions/) */
.sb-subs { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.sb-subs > * { min-width: 0; }
.sb-subs__notice { margin-inline: auto; text-align: center; }
.sb-subs__badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; }
.sb-subs__plan { font-weight: 800; letter-spacing: .02em; }
.sb-subs__state { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 800; white-space: nowrap; }
.sb-subs__state::before { content: ""; width: .45rem; height: .45rem; border-radius: 999px; background: currentColor; }
.sb-subs__state.is-active { color: var(--sb-ok); background: color-mix(in srgb, var(--sb-ok) 14%, transparent); }
.sb-subs__state.is-ended { color: var(--mh-muted); background: color-mix(in srgb, var(--mh-muted) 14%, transparent); }
.sb-subs__card--past .sb-status__title { font-size: clamp(1.4rem, 3.4vw, 1.9rem); }
.sb-subs__facts { max-width: 26rem; }
.sb-subs__discount dd { color: var(--sb-ok); }
.sb-subs__download { display: inline-flex; align-items: center; gap: .55rem; min-height: 3rem; justify-content: center; text-decoration: none; width: 100%; max-width: 26rem;
  font-weight: 700; border-color: color-mix(in srgb, var(--mh-accent) 45%, transparent); }
.sb-subs__download svg { flex: none; color: var(--mh-accent); }

.sb-subs__list { max-width: 38rem; width: 100%; margin-inline: auto; display: grid; gap: .9rem; }
.sb-subs__list-head { display: grid; gap: .3rem; text-align: center; }
.sb-subs__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sb-subs__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding: .9rem 1.1rem; border-radius: var(--sb-radius-sm);
  border: 1px solid var(--sb-line); background: var(--sb-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.sb-subs__row.is-current { border-color: color-mix(in srgb, var(--mh-accent) 45%, transparent); }
.sb-subs__row-main { display: grid; gap: .25rem; min-width: 0; }
.sb-subs__row-plan { display: flex; align-items: center; gap: .5rem; font-weight: 700; flex-wrap: wrap; }
.sb-subs__row-meta { font-size: .82rem; color: var(--mh-muted); overflow-wrap: anywhere; }
.sb-subs__row-side { display: grid; justify-items: end; gap: .3rem; }
.sb-subs__row-amount { font-weight: 800; }
.sb-subs__row-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .35rem 1.1rem;
  padding-top: .5rem; border-top: 1px dashed var(--sb-line); }
.sb-subs__row-actions .sb-link { display: inline-flex; align-items: center; min-height: 2.25rem; }
.sb-subs__pdf::before { content: ""; width: .9rem; height: .9rem; margin-inline-end: .35rem; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M12 4v11m0 0-4.5-4.5M12 15l4.5-4.5M5 19h14'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Cpath d='M12 4v11m0 0-4.5-4.5M12 15l4.5-4.5M5 19h14'/%3E%3C/svg%3E") center / contain no-repeat; }
.sb-subs__store-note { text-align: center; }
@media (max-width: 420px) { .sb-subs__row { padding: .8rem .9rem; } }
/* RTL: plan names are Latin ("Pro+"); keep the "+" on the right side. */
[dir="rtl"] .sb-plan__name { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .sb-pick__name, [dir="rtl"] .sb-bar__plan, [dir="rtl"] .sb-table tbody th { unicode-bidi: plaintext; text-align: right; }
/* Comparison table on phones: keep package names and prices on one line and
   drop the Access column (the package label already says Monthly/Yearly), so
   the table fits a 390px screen instead of clipping the last columns. */
.sb-table tbody th, .sb-table td.sb-num { white-space: nowrap; }
@media (max-width: 40rem) {
  .sb-table { min-width: 0; font-size: .86rem; }
  .sb-table th, .sb-table td { padding: .75rem .6rem; }
  .sb-table thead th { font-size: .7rem; letter-spacing: .04em; }
  .sb-table tr > :nth-child(3) { display: none; }
}

/* ── Former inline styles: web_auth/templates/web_auth/app_only.html, web_auth/templates/web_auth/subscribe_status.html (strict CSP) ── */
.sb-status__title--start { text-align: start !important; }
.sb-status__body--wide { max-width: none !important; }
.sb-locked__text { display: grid !important; gap: .5rem !important; }
.sb-fine--lg { font-size: .95rem !important; }
.sb-fine--narrow { max-width: 28rem !important; }
.sb-app-only__icon-ring { background: rgba(14,165,233,0.12) !important; border: 2px solid rgba(14,165,233,0.3) !important; }
.sb-app-only__icon { color: #38bdf8 !important; }
.sb-app-only__text { color: var(--mh-text) !important; }
.sb-app-only__muted { color: var(--mh-muted) !important; }