/* 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 { position: relative; cursor: pointer; }
.sb-toggle__input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sb-toggle__btn:has(.sb-toggle__input:checked) { background: linear-gradient(135deg, var(--mh-accent), color-mix(in srgb, var(--mh-accent-secondary) 82%, white)); color: #04131f; }
.sb-toggle__btn:has(.sb-toggle__input:focus-visible) { outline: 2px solid var(--mh-accent); outline-offset: 3px; }
.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:has(.sb-toggle__input:checked) .sb-save { background: rgba(4, 19, 31, .14); color: #04131f; }

/* Plan choice: toggle above two cards (one radio group) */
.sb-select { display: grid; justify-items: center; gap: clamp(1.25rem, 3vw, 1.75rem); margin-top: clamp(1.25rem, 3.5vw, 2.25rem); }
.sb-select fieldset { border: 0; margin: 0; min-width: 0; }
.sb-plans { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); width: 100%; max-width: 60rem; padding: 0; }
@media (min-width: 700px) { .sb-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sb-select__update { text-align: center; }

.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, .sb-plan:has(.sb-plan__radio:checked) { border-color: var(--mh-accent);
  box-shadow: 0 0 0 2px var(--mh-accent), 0 22px 60px color-mix(in srgb, var(--mh-accent) 22%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--mh-accent) 10%, transparent), var(--sb-glass)); }
/* The whole card is the radio's label; the input itself stays in the tab order (visually hidden). */
.sb-plan__radio { position: absolute; inset-block-start: 1.4rem; inset-inline-start: 1.4rem; width: 1px; height: 1px; opacity: 0; margin: 0; }
.sb-plan__hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; cursor: pointer; }
.sb-plan:has(.sb-plan__radio:focus-visible) { outline: 3px solid var(--mh-accent); outline-offset: 4px; }
.sb-plan__check { position: absolute; inset-block-start: 1.1rem; inset-inline-end: 1.1rem; width: 1.9rem; height: 1.9rem; border-radius: 999px; display: grid; place-items: center;
  border: 2px solid var(--sb-line); color: transparent; background: var(--sb-glass); transition: background .2s, border-color .2s, color .2s, transform .2s; }
.sb-plan.is-selected .sb-plan__check, .sb-plan:has(.sb-plan__radio:checked) .sb-plan__check { border-color: transparent; color: #04131f;
  background: linear-gradient(135deg, var(--mh-accent), var(--mh-accent-secondary)); }
@media (prefers-reduced-motion: no-preference) { .sb-plan.is-selected .sb-plan__check { animation: sb-pop .35s cubic-bezier(.2, .8, .2, 1); } }
.sb-plan__head { padding-inline-end: 2.6rem; }
.sb-plan__lead { font-size: .85rem; font-weight: 700; color: var(--mh-muted-strong); margin-bottom: .55rem; }
.sb-plan__features { flex: 1; }
.sb-plan__state { display: flex; justify-content: center; align-items: center; min-height: 2.75rem; border-radius: 14px; font-weight: 800; font-size: .92rem;
  border: 1px solid var(--sb-line); color: var(--mh-muted-strong); }
.sb-plan__state-on { display: none; }
.sb-plan.is-selected .sb-plan__state { border-color: transparent; color: var(--mh-accent-ink, var(--mh-accent)); background: color-mix(in srgb, var(--mh-accent) 14%, transparent); }
.sb-plan.is-selected .sb-plan__state-on { display: inline; }
.sb-plan.is-selected .sb-plan__state-off { display: none; }
@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-start: 1.5rem; z-index: 2; 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: .6rem; list-style: none; padding: 0; margin: 0; }
.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; }

/* Checkout: one full-width section under the plans */
.sb-checkout { margin-top: clamp(1.75rem, 4vw, 2.75rem); scroll-margin-top: calc(var(--mh-header-h, 5rem) + 1rem); }
.sb-checkout__card { display: grid; max-width: 60rem; margin-inline: auto; border-radius: var(--sb-radius); border: 1px solid var(--sb-line); overflow: hidden;
  background: var(--sb-glass); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); }
@media (min-width: 900px) { .sb-checkout__card { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.sb-checkout__summary, .sb-checkout__action { display: grid; gap: 1.1rem; align-content: start; padding: clamp(1.25rem, 3.2vw, 2rem); min-width: 0; }
.sb-checkout__action { background: color-mix(in srgb, var(--mh-accent) 5%, transparent); border-block-start: 1px solid var(--sb-line); }
@media (min-width: 900px) { .sb-checkout__action { border-block-start: 0; border-inline-start: 1px solid var(--sb-line); } }
.sb-checkout__title { font-size: 1.3rem; font-weight: 800; }
.sb-included { display: grid; gap: .5rem; }
.sb-included__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem .9rem; }
@media (min-width: 520px) { .sb-included__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sb-included__list[hidden] { display: none; }
.sb-included__list li { display: flex; gap: .45rem; align-items: flex-start; font-size: .88rem; line-height: 1.45; }
.sb-included__list svg { flex: none; margin-top: .15rem; color: var(--sb-ok); }
.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; align-items: baseline; gap: 1rem; font-size: .93rem; }
.sb-line[hidden] { display: none; }
.sb-line--why dd { font-weight: 500; font-size: .82rem; color: var(--mh-muted); }
.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 { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.sb-lines { padding-block-start: .9rem; border-block-start: 1px solid var(--sb-line); }
.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__label { font-size: .82rem; font-weight: 700; color: var(--mh-muted-strong); }
.sb-offer__input.is-valid { border-color: var(--sb-ok) !important; }
.sb-offer__input.is-invalid { border-color: var(--sb-bad) !important; }
.sb-offer__apply { position: relative; min-width: 6rem; }
.sb-offer__apply.is-loading .sb-btn-spinner { display: inline-block; }
.sb-btn-spinner--dark { border-color: color-mix(in srgb, var(--mh-text) 25%, transparent); border-top-color: var(--mh-text); }
.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; 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; }


/* 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: clamp(1.6rem, 3.5vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--mh-text); }
.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__kicker { flex-basis: 100%; margin: 0; text-align: center; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.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; }

/* ------------------------------------------------------------------ v8: EGP charge notes (USD-priced visitors) */
.sb-pay__charge { margin: .45rem 0 0; text-align: center; }
.sb-bar__charge { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-bar__charge[hidden], .sb-pay__charge[hidden] { display: none; }
.sb-status__charged { display: block; font-weight: 500; }

/* Pro -> Pro+ upgrade options and the Pro+ member's "buy Pro?" warning */
.sb-upgrade { display: grid; gap: .6rem; border: 0; margin: 0; padding: 0; min-width: 0; scroll-margin-top: calc(var(--mh-header-h, 5rem) + 1rem); }
.sb-upgrade[hidden] { display: none; }
.sb-upgrade__legend { font-size: 1rem; font-weight: 800; padding: 0; margin-bottom: .2rem; }
.sb-upgrade__options { display: grid; gap: .6rem; }
.sb-upgrade__option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; padding: .9rem 1rem; cursor: pointer;
  border-radius: var(--sb-radius-sm, 1rem); border: 1px solid var(--sb-line); background: var(--sb-glass); transition: border-color .2s, box-shadow .2s; }
.sb-upgrade__option.is-selected, .sb-upgrade__option:has(:checked) { border-color: var(--mh-accent); box-shadow: 0 0 0 1px var(--mh-accent);
  background: color-mix(in srgb, var(--mh-accent) 8%, transparent); }
.sb-upgrade__option:has(:focus-visible) { outline: 2px solid var(--mh-accent); outline-offset: 3px; }
.sb-upgrade__radio { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--mh-accent); }
.sb-upgrade__radio:focus-visible { outline: none; }
.sb-upgrade__text { display: grid; gap: .3rem; min-width: 0; }
.sb-upgrade__row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.sb-upgrade__title { font-weight: 800; font-size: .95rem; }
.sb-upgrade__price { font-size: 1rem; }
.sb-upgrade__body { color: var(--mh-muted-strong); font-size: .85rem; line-height: 1.5; }
.sb-upgrade__facts { display: grid; gap: .15rem; font-size: .78rem; color: var(--mh-muted); line-height: 1.45; }
.sb-warnbox { display: grid; gap: .6rem; padding: 1rem; border-radius: var(--sb-radius-sm, 1rem);
  border: 1px solid color-mix(in srgb, var(--sb-warn) 45%, transparent); background: color-mix(in srgb, var(--sb-warn) 10%, transparent); }
.sb-warnbox[hidden] { display: none; }
.sb-warnbox__title { margin: 0; font-weight: 800; }
.sb-check { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.sb-check input { margin-top: .2rem; }

/* ------------------------------------------------------------------ v9: checkout redesign (plans above, checkout below) */
.sb-trust { list-style: none; margin: 0; padding: .9rem 0 0; border-block-start: 1px dashed var(--sb-line); display: grid; gap: .55rem; }
.sb-trust li { display: flex; gap: .55rem; align-items: flex-start; font-size: .8rem; color: var(--mh-muted); line-height: 1.5; }
.sb-trust svg { flex: none; margin-top: .12rem; color: var(--sb-ok); }
.sb-trust .sb-redirect-note svg { color: var(--mh-accent); }
.sb-pay { gap: .6rem; }
.sb-pay__btn[aria-busy="true"] { cursor: progress; }
.sb-payerr { display: grid; gap: .25rem; padding: .75rem .9rem; border-radius: var(--sb-radius-sm); scroll-margin: 6rem;
  border: 1px solid color-mix(in srgb, var(--sb-bad) 45%, transparent); background: color-mix(in srgb, var(--sb-bad) 9%, transparent); }
.sb-payerr[hidden] { display: none; }
.sb-checkout .sb-signin { padding: 0; border: 0; background: none; }
.sb-checkout .sb-code { background: color-mix(in srgb, var(--mh-text) 2%, transparent); }
.sb-chip[hidden], .sb-equiv[hidden] { display: none; }
[dir="rtl"] .sb-upgrade__title, [dir="rtl"] .sb-pick__name { unicode-bidi: plaintext; }
[dir="rtl"] .sb-line dd { text-align: start; }
[dir="rtl"] .sb-line--total dd { justify-content: flex-start; }
@media (max-width: 420px) {
  .sb-plan { padding: 1.25rem 1.1rem; }
  .sb-checkout__summary, .sb-checkout__action { padding: 1.15rem 1rem; }
  .sb-toggle__btn { padding-inline: 1rem; }
}
/* Light theme contrast: muted text on the tinted action column stays >= 4.5:1. */
[data-theme="light"] .sb-checkout__action { background: color-mix(in srgb, var(--mh-accent) 4%, #ffffff); }

/* Receipts (K5): the status comes from the purchase's live subscription entry. */
.sb-subs__state.is-scheduled { color: var(--mh-accent-ink, var(--mh-accent)); background: color-mix(in srgb, var(--mh-accent) 14%, transparent); }
.sb-subs__state.is-removed { color: var(--sb-bad); background: color-mix(in srgb, var(--sb-bad) 12%, transparent); }
/* RTL: amounts like "1,399 EGP" keep their left-to-right order inside Arabic/Urdu/Persian lines. */
[dir="rtl"] span.sb-num, [dir="rtl"] strong.sb-num, [dir="rtl"] s.sb-num, [dir="rtl"] .sb-bar__total { direction: ltr; }

/* Pointer to the separate Exam Prep packs (one-time purchase). */
.sb-exam { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; padding: 1.25rem 1.4rem; border-radius: 1.4rem;
  border: 1px solid color-mix(in srgb, var(--mh-accent) 30%, var(--mh-card-border)); background: color-mix(in srgb, var(--mh-accent) 6%, var(--mh-surface-soft)); }
.sb-exam > div { flex: 1 1 20rem; min-width: 0; display: grid; gap: .3rem; }
.sb-exam__title { font-size: 1.05rem; font-weight: 750; }
.sb-exam__cta { min-height: 2.9rem; text-decoration: none; flex: none; }