/* MitaBase Pro — a product of ETMITA · https://etmita.com
   Copyright © ETMITA. All rights reserved. */
/* ════════════════════════════════════════════════════════════════
   UPGRADE — the page a locked module opens.

   The page is src/features/upgrade/upgrade.page.ts →
   public/js/pages/upgrade.js; this sheet holds every .up-* rule.
   Token-native under .mt-scope; logical properties throughout, so the
   Persian page mirrors without a second sheet.

   The design is a calm sequence, not a sales funnel: an ink hero that
   names the module and SHOWS it (a real screenshot in a device frame),
   three outcomes, the customer's own number, the plans as a table with
   a thumbnail on hover, three honest steps, four questions, the same
   CTA once more. Motion is one rise on mount and 150–220 ms hovers;
   reduced motion gets the resting frame.
   ════════════════════════════════════════════════════════════════ */

/* The page is a two-column grid, centred, and uses the width it has
   (operator 2026-09-06: "we have all this space and it is glued to the
   left"). The hero, the plans and the closing band run full width; what
   you get sits beside your bill, how it goes beside the questions. One
   column under 1100 px. */
.up {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px;
  align-items: start; width: 100%; max-width: 1440px; margin-inline: auto;
  padding: 18px 24px 56px; box-sizing: border-box;
}
.up > .up-hero, .up > .up-sec--plans, .up > .up-band, .up--loading > * { grid-column: 1 / -1; }
.up-sec--outcomes, .up-sec--how { grid-column: 1; }
.up-bill, .up-sec--faq { grid-column: 2; }
.up-sec--outcomes .up-outs, .up-sec--how .up-steps { grid-template-columns: 1fr; }
/* Without a bill beside it (the plain page, no module asked for) the
   outcomes list takes the whole row and its own three-up grid. */
.up:not(:has(.up-bill)) .up-sec--outcomes { grid-column: 1 / -1; }
.up:not(:has(.up-bill)) .up-sec--outcomes .up-outs { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.up-ic { flex: 0 0 auto; }
.up-yes { color: var(--accent-text); }
.up-no { color: var(--text-muted); opacity: .5; }
.up-sec { display: flex; flex-direction: column; gap: 12px; }
.up-h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display), "Space Grotesk", sans-serif; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: var(--text-primary); }
.up-sub { margin: 0; font-size: .8rem; line-height: 1.55; color: var(--text-secondary); max-width: 68ch; }
.up-plan-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: .7rem; font-weight: 800; letter-spacing: .03em; }

/* ── hero ───────────────────────────────────────────────────────── */
.up-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 30px 28px; border: 1px solid var(--border-subtle); border-radius: 18px;
  background: var(--surface-card);
}

/* The locked-module hero is INK, not paper.
   Somebody lands here because a click did not work, and a white card
   with an apology in it reads like an error state. The dark panel is the
   same one the login and registration screens use — it says "this is a
   part of the product you have not opened yet", which is the truth, and
   it gives the module's own name somewhere to be large. Beside the
   words: the module itself, as it looks in the panel. */
.up-hero--dark {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 46%); gap: 26px; align-items: center;
  border-color: transparent;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(164, 240, 58, .1), transparent 60%),
    var(--mb-ink);
  color: var(--mb-ondark);
}
.up-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.up-hero--dark .up-h1 { color: #fff; }
.up-hero--dark .up-lede { color: var(--mb-ondark); }
.up-hero--dark .up-fine { color: var(--mb-faint); }
.up-hero--dark .up-in-plan { color: #fff; }
.up-hero--dark .up-plan-chip { background: rgba(164, 240, 58, .16); color: var(--mb-lime); }
.up-hero--dark .up-badge { background: rgba(255, 255, 255, .08); color: var(--mb-ondark); }
.up-hero--dark .up-ghost { border-color: rgba(255, 255, 255, .22); color: var(--mb-ondark); }
.up-hero--dark .up-ghost:hover { background: rgba(255, 255, 255, .07); color: #fff; }

/* One soft lime bloom behind the corner. It is the page's only
   decoration and it does not move. */
.up-glow {
  position: absolute; inset-inline-end: -80px; top: -110px;
  width: 320px; height: 320px; border-radius: 999px; pointer-events: none;
  background: radial-gradient(circle, rgba(164, 240, 58, .22), transparent 62%);
  filter: blur(12px);
}

/* The device frame: a browser window for the panel, a phone for the
   app. Pure CSS — the screenshot is the only image. */
.up-frame {
  position: relative; margin: 0; min-width: 0; justify-self: end;
  width: 100%; max-width: 520px;
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: var(--mb-ink-2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .3);
  animation: up-rise var(--mb-dur-slow) var(--mb-ease-out) both;
}
.up-frame-bar { display: flex; gap: 5px; padding: 8px 10px; background: rgba(255, 255, 255, .06); }
.up-frame-bar i { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .22); }
.up-shot { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top left; }
.up-frame.is-phone {
  width: 210px; max-width: 42%; justify-self: center; aspect-ratio: 390 / 844;
  border-radius: 28px; border-width: 6px; border-color: var(--mb-ink-2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1);
}
.up-frame.is-phone .up-shot { aspect-ratio: 390 / 844; object-position: top; }
.up-frame-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 70px; height: 18px; border-radius: 999px; background: var(--mb-ink-2); z-index: 1; }
@keyframes up-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.up-hero--billing { border-color: var(--status-expiring); background: var(--status-expiring-soft); }

.up-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-inset); color: var(--text-secondary);
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.up-badge--warn { background: var(--surface-card); color: var(--text-primary); }

.up-h1 {
  margin: 2px 0 0; font-family: var(--font-display), "Space Grotesk", sans-serif;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 800;
  letter-spacing: -.02em; color: var(--text-primary);
}
.up-lede { margin: 0; max-width: 68ch; font-size: .85rem; line-height: 1.6; color: var(--text-secondary); }
.up-meta { margin: 0; font-size: .76rem; color: var(--text-muted); }
.up-in-plan { margin: 4px 0 0; font-size: .82rem; color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.up-fine { margin: 2px 0 0; max-width: 68ch; font-size: .72rem; line-height: 1.55; color: var(--text-muted); }

.up-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

/* 44 px on the short side — a touch target, not a design choice. */
.up-cta, .up-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 11px;
  font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer;
  transition: background-color var(--mb-dur-fast) var(--mb-ease-out),
              color var(--mb-dur-fast) var(--mb-ease-out),
              transform var(--mb-dur-fast) var(--mb-ease-out);
}
.up-cta { border: 0; background: var(--accent-fill-solid); color: var(--accent-contrast); }
.up-cta:hover:not(:disabled) { transform: translateY(-1px); }
.up-cta:disabled { opacity: .55; cursor: default; }
.up-ghost { border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); }
.up-ghost:hover { background: var(--surface-hover); color: var(--text-primary); }
.up-cta:focus-visible, .up-ghost:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 2px; }

/* ── outcomes ───────────────────────────────────────────────────── */
.up-outs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.up-out {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-card);
  font-size: .82rem; line-height: 1.5; color: var(--text-primary);
}
.up-out .up-ic { margin-top: 2px; }

/* ── the bill ───────────────────────────────────────────────────── */
.up-bill { padding: 18px 20px 20px; border: 1px solid var(--border-subtle); border-radius: 16px; background: var(--surface-card); }
.up-bill-head { display: flex; flex-direction: column; gap: 4px; }
.up-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.up-fact {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px;
  border-radius: 999px; background: var(--surface-inset); color: var(--text-secondary); font-size: .76rem; cursor: help;
}
.up-fact b { font-weight: 700; color: var(--text-primary); }
.up-fact.is-free { background: var(--accent-soft); color: var(--accent-text); }
.up-fact.is-free b { color: var(--accent-text); }
.up-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border-subtle); font-size: .82rem; color: var(--text-secondary); cursor: help; }
.up-line b { font-weight: 700; color: var(--text-primary); }
.up-totals { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 12px; }
.up-total { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--mb-ink); color: var(--mb-ondark); cursor: help; }
.up-total b { font-family: var(--font-mono), "JetBrains Mono", monospace; font-size: 1.6rem; font-weight: 700; color: var(--mb-lime); letter-spacing: -.01em; }
.up-total span { font-size: .74rem; color: var(--mb-ondark); }
.up-total.is-year { background: var(--surface-inset); color: var(--text-secondary); }
.up-total.is-year b { color: var(--text-primary); }
.up-bill-note { margin: 12px 0 0; font-size: .76rem; line-height: 1.55; color: var(--text-muted); }
.up-bill-note.is-zero { color: var(--accent-text); font-weight: 700; }
.up-bill-onreq { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--surface-inset); font-size: .82rem; color: var(--text-primary); }

/* ── plans ──────────────────────────────────────────────────────── */
.up-plans { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }

.up-plan {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 18px 20px; border: 1px solid var(--border-subtle);
  border-radius: 14px; background: var(--surface-card);
  transition: transform var(--mb-dur-base) var(--mb-ease-out), box-shadow var(--mb-dur-base) var(--mb-ease-out);
}
.up-plan:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.up-plan.is-mine {
  border-color: var(--accent-fill-solid);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.up-plan.is-popular { box-shadow: var(--shadow-sm); }

/* The plan that CONTAINS the module they clicked is the answer to the
   question they arrived with, so it is the one that is allowed to lift
   off the page. */
.up-plan.is-target {
  border-color: var(--accent-fill-solid);
  box-shadow: 0 18px 40px -22px rgba(23, 23, 23, .45);
}

.up-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.up-plan-name { margin: 0; font-family: var(--font-display), "Space Grotesk", sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--text-primary); }
.up-chip { padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.up-chip--pop { background: var(--surface-inset); color: var(--text-secondary); }

.up-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.up-price { font-family: var(--font-mono), "JetBrains Mono", monospace; font-size: 1.35rem; font-weight: 700; color: var(--text-primary); }
.up-price-unit, .up-price-onreq { font-size: .74rem; color: var(--text-muted); }
.up-price-onreq { font-weight: 700; color: var(--text-secondary); }
.up-free { margin: -2px 0 0; font-size: .74rem; font-weight: 700; color: var(--accent-text); }
.up-blurb { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--text-secondary); }

.up-rows { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.up-row { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: .77rem; color: var(--text-muted); border-radius: 7px; }
.up-row.is-on { color: var(--text-secondary); }

/* The one thing that is allowed to shout: the row they clicked. */
.up-row.is-wanted {
  margin-inline: -8px; padding-inline: 8px;
  background: var(--accent-soft); color: var(--text-primary); font-weight: 800;
}

.up-gps { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--border-subtle); font-size: .74rem; color: var(--text-muted); }

/* ── how it goes ────────────────────────────────────────────────── */
.up-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: none; }
.up-step {
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px;
  padding: 16px 16px 16px 18px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-card);
}
.up-step-no { position: absolute; top: 10px; inset-inline-end: 12px; font-size: .68rem; font-weight: 700; color: var(--text-muted); }
.up-step-ic { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.up-step b { font-size: .84rem; font-weight: 800; color: var(--text-primary); }
.up-step p { margin: 0; font-size: .77rem; line-height: 1.55; color: var(--text-secondary); }

/* ── questions ──────────────────────────────────────────────────── */
.up-faq { display: flex; flex-direction: column; gap: 6px; }
.up-q { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-card); }
.up-q summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  cursor: pointer; list-style: none; font-size: .84rem; font-weight: 700; color: var(--text-primary);
}
.up-q summary::-webkit-details-marker { display: none; }
.up-q summary::after { content: "+"; margin-inline-start: auto; font-family: var(--font-mono), monospace; color: var(--text-muted); }
.up-q[open] summary::after { content: "–"; }
.up-q summary:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: -2px; border-radius: 12px; }
.up-q p { margin: 0; padding: 0 14px 14px 40px; font-size: .8rem; line-height: 1.6; color: var(--text-secondary); }
[dir="rtl"] .up-q p { padding: 0 40px 14px 14px; }

/* ── the band ───────────────────────────────────────────────────── */
.up-band {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 18px 22px; border-radius: 16px; background: var(--mb-ink); color: var(--mb-ondark);
}
.up-band-text { margin: 0; font-family: var(--font-display), "Space Grotesk", sans-serif; font-size: 1.05rem; font-weight: 800; color: #fff; }

/* ── narrow ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .up { grid-template-columns: 1fr; padding-inline: 16px; }
  .up > *, .up-sec--outcomes, .up-sec--how, .up-bill, .up-sec--faq { grid-column: 1; }
  .up-sec--outcomes .up-outs, .up-sec--how .up-steps { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 900px) {
  .up-hero--dark { grid-template-columns: 1fr; }
  .up-frame { justify-self: stretch; max-width: none; }
  .up-frame.is-phone { justify-self: center; max-width: 60%; }
}
@media (max-width: 720px) {
  .up { padding: 14px 12px 40px; gap: 18px; }
  .up-hero { padding: 20px 16px; }
  .up-h1 { font-size: 1.35rem; }
  .up-plans { grid-template-columns: 1fr; }
  .up-total b { font-size: 1.35rem; }
}

/* prefers-reduced-motion kills every transform; the resting frame is
   the design, so nothing here needs a still partner. */
@media (prefers-reduced-motion: reduce) {
  .up-cta:hover:not(:disabled), .up-plan:hover { transform: none; }
  .up-frame { animation: none; }
}