/* Screens before sign-in (Modern Clear): pieces the PHP pages need on top of signup.css. */
body { background: var(--bg); }
.sg-term[hidden], .sg-err[hidden], .help[hidden] { display: none; }
.sg-top .sg-backlink { text-decoration: none; }
.sg-head a.back { text-decoration: none; }
.toast.is-error .ok { color: var(--red-text); }
/* Password show / hide: one icon at a time (auth.js flips aria-pressed). */
.ipw .ib .ico:last-child, .ipw .ib[aria-pressed="true"] .ico:first-child { display: none; }
.ipw .ib[aria-pressed="true"] .ico:last-child { display: block; }
.sg .tlink[hidden], .sg .info[hidden] { display: none; }
.sg-secn .ico { display: none; }
.sg-sec.is-done .sg-secn .ico { display: block; }
.sg-sec.is-done .sg-secn [data-sec-todo] { display: none; }
/* .sg-x pieces are shown as flex by the board's v3 rules; [hidden] still wins. */
.sg-x[hidden], .sg-okl[hidden] { display: none; }
/* Business licence picked as a PDF: its file name in the thumbnail. */
.thumb .lic-name { display: flex; align-items: center; justify-content: center; padding: 10px; font-size: 13px; font-weight: 600; color: var(--t3); text-align: center; overflow-wrap: anywhere; }

/* Icon steps: as many columns as the flow has steps (store 5, distributor 4, password 3), each as
   wide as on the 5-step board, centred over the card */
.sg.v3 .sg-isteps{grid-template-columns:repeat(var(--n,5),minmax(0,1fr));max-width:calc(var(--n,5) * 144px)}
.sg.v3.has-brand .sg-isteps{max-width:calc(var(--n,5) * 144px);margin-left:auto;margin-right:auto}

/* Services and payment (sign-up steps 4–5, board screens 4–7) */
.sg [hidden] { display: none !important; }
.sg-acct-w { display: flex; flex-direction: column; gap: 14px; }
.sg-ch-sm h2 { font-size: 17px; }
.sg-badge.fail { background: var(--red-weak); color: var(--red-text); }
.sg-ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--t3); list-style: disc; }

/* Brand panel with the pictures as a full-bleed background, like the sign-in screen: the logo stays
   on top, the captions, dots, points and services sit at the bottom over the darker part of the shade. */
.sg-brand.is-full { background: #0B1628; }
.sg-brand.is-full .sg-bimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; opacity: 0; }
.sg-brand.is-full .sg-bimg.on { opacity: .92; }
.sg-brand.is-full .sh { background: linear-gradient(180deg, rgba(7,16,30,.62) 0%, rgba(7,16,30,.08) 18%, rgba(7,16,30,.3) 30%, rgba(7,16,30,.84) 48%, rgba(7,16,30,.95) 100%); pointer-events: none; }
.sg-brand.is-full .sg-bhero { text-shadow: 0 1px 12px rgba(7,16,30,.55); }
.sg-brand.is-full .sg-bdots { justify-content: flex-start; }
.sg-brand.is-full .sg-bsvc { margin-top: 18px; }

/* ── Store card (sign-up step 3, right column): a membership-card look ──
   The card itself (credit-card proportions): ink background with a soft brand-colour glow and a
   hairline highlight, the store's first letter as a large watermark, brand + status on top, the
   store name and address, then representative and business number like card holder / expiry.
   Under it, on a light sheet: overall progress (one figure + a 3-part bar) and contact details.
   Empty values are soft bars on the card and a dash in the list, never repeated placeholder text. */
.pc { display: flex; flex-direction: column; border-radius: 24px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-2), 0 18px 40px -24px rgba(0, 20, 50, .28); overflow: hidden; }
/* Card colours: the theme's main-button pair (--btn background, --pon text), so blue, mint and red
   themes and dark mode all keep readable contrast; a light sheen top-right and a deeper corner give depth. */
.pc-card {
  --ink: var(--pon, #fff);
  position: relative; isolation: isolate; aspect-ratio: 1.586; margin: 10px; padding: 20px 22px; border-radius: 18px; overflow: hidden;
  display: flex; flex-direction: column; color: var(--ink);
  background:
    radial-gradient(110% 120% at 100% 0%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(135deg, var(--btn) 0%, var(--btn) 42%, color-mix(in srgb, var(--btn) 90%, #000) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 32px -18px color-mix(in srgb, var(--btn) 75%, transparent);
}
.pc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .14) 47%, transparent 58%); pointer-events: none; }
.pc-wm { position: absolute; z-index: -1; right: -6px; bottom: -34px; font-size: 168px; font-weight: 800; line-height: 1; letter-spacing: -0.06em; color: color-mix(in srgb, var(--ink) 12%, transparent); pointer-events: none; user-select: none; }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.pc-mk { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 13px; font-weight: 800; letter-spacing: -0.02em; color: var(--btn); background: var(--ink); }
.pc-st { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 13px; font-weight: 700; color: var(--btn); background: var(--ink); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .3); }
.pc-st i { width: 6px; height: 6px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
.pc-mid { margin-top: auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pc-name { font-size: 23px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-name.is-empty { color: color-mix(in srgb, var(--ink) 70%, transparent); }
.pc-addr { font-size: 14px; line-height: 1.4; color: color-mix(in srgb, var(--ink) 90%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.4em; }
.pc-bot { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; }
.pc-bot > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc-bot > .r { align-items: flex-end; text-align: right; }
.pc-bot small { font-size: 13px; font-weight: 500; color: color-mix(in srgb, var(--ink) 86%, transparent); }
.pc-bot span { font-size: 15px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; min-height: 1.4em; }
/* empty values on the card: a soft bar the size of the text it waits for */
.pc-card .is-empty:empty::before { content: ""; display: block; height: .62em; margin-top: .42em; border-radius: 4px; background: color-mix(in srgb, var(--ink) 26%, transparent); }
.pc-addr.is-empty:empty::before { width: 72%; }
.pc-bot span.is-empty:empty::before { width: 64px; }
.pc-bot .r span.is-empty:empty::before { width: 96px; margin-left: auto; }

.pc-prog { display: flex; flex-direction: column; gap: 10px; padding: 14px 22px 18px; }
.pc-ph { display: flex; align-items: baseline; justify-content: space-between; }
.pc-ph span { font-size: 15px; font-weight: 600; color: var(--t2); }
.pc-ph b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--t1); }
.pc-bar { display: grid; grid-template-columns: 3fr 3fr 6fr; gap: 4px; }
.pc-bar i { height: 6px; border-radius: 3px; background: var(--fill-2); overflow: hidden; }
.pc-bar em { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--blue); transition: width .3s ease; }
.pc-bar i.on em { background: var(--green); }
.pc-secs { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pc-secs li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--t3); }
.pc-secs li i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; box-shadow: inset 0 0 0 1.5px var(--line); color: transparent; }
.pc-secs li i .ico { width: 12px; height: 12px; }
.pc-secs li em { margin-left: auto; font-style: normal; font-size: 14px; color: var(--t4); }
.pc-secs li.on { color: var(--t1); font-weight: 600; }
.pc-secs li.on i { background: var(--green); box-shadow: none; color: #fff; }
.pc-secs li.on em { color: var(--green-text); }

.pc-dl { margin: 0; padding: 14px 22px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: inset 0 1px 0 var(--line-2); }
.pc-dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.pc-dl dt { display: flex; align-items: center; gap: 8px; color: var(--t3); flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-dl dt .ico { flex: 0 0 auto; }
.pc-dl dt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pc-dl dt .ico { color: var(--t4); }
.pc-dl dd { margin: 0; flex: 0 1 auto; max-width: 72%; font-weight: 600; color: var(--t1); text-align: right; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pc-dl dd.is-empty:empty::before { content: "—"; font-weight: 400; color: var(--t5); }

@media (prefers-reduced-motion: reduce) { .pc-bar em { transition: none; } }

/* ── Wider wide steps (store details, services, payment, distributor details) ──
   The board's 1080px left the step 3 form at 688px next to a 340px card: cramped on wide screens.
   Wide steps now go to 1280px (form ≈ 848px) and the card column to 380px. Short steps with the
   brand panel keep 640px (.sg.v2.has-brand .wiz wins on specificity). */
.sg.v3 .wiz { max-width: 1280px; }
@media (min-width: 1181px) {
  .sg.v3 .sg-s3 { grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; }
}
.pc-bot small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ── Sign-up top bar: brand on the left, "already have an account? Sign in" + language on the right ──
   (was: a "back" text link before the logo). The logo links to sign-in; each card keeps its own back arrow. */
.sg .sg-top { justify-content: space-between; gap: 16px; }
.sg-top .sg-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--t1); border-radius: 10px; }
.sg-top .sg-logo .logo-mk { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 14px -6px color-mix(in srgb, var(--blue) 70%, transparent); }
.sg-top .sg-logo > b { font-size: 21px; }
.sg-top .sg-logo .tx { font-size: 16px; font-weight: 600; color: var(--t3); margin-left: 2px; padding-left: 12px; box-shadow: inset 1px 0 0 var(--line); line-height: 18px; }
.sg-tr { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.sg.v2 .sg-tr .lsel { margin-left: 0; }
.sg-acc { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--t3); white-space: nowrap; }
/* same height, radius and text size as the language select (.lsel) next to it */
.sg-acc a { display: inline-flex; align-items: center; height: 46px; padding: 0 18px; border-radius: 23px; font-size: 16px; font-weight: 700; color: var(--t1); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; }
.sg-acc a:hover { background: var(--fill); }
@media (max-width: 720px) {
  .sg-acc-q { display: none; }
  .sg-tr { gap: 10px; }
  /* phones: the brand panel is gone, so the top bar shows the logo (without the flow name) */
  .sg.v2 .sg-top .sg-logo { display: inline-flex !important; visibility: visible; }
  .sg-top .sg-logo > b { font-size: 19px; }
}