/* Stockzen — member app chrome + dashboard (app.stockzen.io) */
:root {
  --bg: #ffffff;
  --bg-2: #f4f7fd;
  --line: #d9e2f5;
  --line-strong: #c5d3ee;
  --text: #0b1220;
  --muted: #5b6474;
  --faint: #8a93a3;
  --accent: #0a25dc;
  --accent-hover: #0820c2;
  --accent-soft: #eaf0ff;
  --good: #15803d;
  --good-soft: #ecfdf3;
  --good-line: #bbf7d0;
  --warn: #b45309;
  --warn-soft: #fffbeb;
  --warn-line: #fde68a;
  --bad: #b91c1c;
  --bad-soft: #fef2f2;
  --bad-line: #fecaca;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 1px 2px rgba(16, 24, 40, 0.04), 0 16px 40px -20px rgba(16, 24, 40, 0.18);
  --radius: 14px;
  --max: 1200px;
  --nav-h: 64px;
}

html, body.sza-body {
  height: auto;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg-2);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.sza-body *,
body.sza-body *::before,
body.sza-body *::after { box-sizing: border-box; }
:where(body.sza-body) a { color: inherit; text-decoration: none; }
:where(body.sza-body) img { display: block; max-width: 100%; }
:where(body.sza-body) h1, :where(body.sza-body) h2, :where(body.sza-body) h3, :where(body.sza-body) h4 {
  margin: 0; font-weight: 600; letter-spacing: -0.02em; color: var(--text); line-height: 1.2;
}
:where(body.sza-body) p { margin: 0; }
:where(body.sza-body) button, :where(body.sza-body) input { font-family: inherit; }

.sza-wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

/* ---------- Top nav ---------- */
.sza-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.sza-nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}
.sza-brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.sza-brand img { height: 30px; width: auto; }

.sza-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0 auto 0 8px;
  padding: 0;
  list-style: none;
}
.sza-links > li { position: relative; list-style: none; margin: 0; padding: 0; }
.sza-links a, .sza-links button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.sza-links a:hover, .sza-links button:hover { background: var(--bg-2); color: var(--text); }
.sza-links a.is-active, .sza-links button.is-active { color: var(--text); background: var(--accent-soft); font-weight: 600; }
.sza-links svg.chev { width: 14px; height: 14px; opacity: 0.6; transition: transform 0.15s ease; }
.sza-links li.is-open > button svg.chev { transform: rotate(180deg); }

.sza-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  display: none;
  z-index: 60;
}
.sza-menu.right { left: auto; right: 0; }
li.is-open > .sza-menu, .sza-user.is-open .sza-menu { display: block; }
.sza-menu a, .sza-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.sza-menu a:hover, .sza-menu button:hover { background: var(--bg-2); }
.sza-menu a svg { width: 16px; height: 16px; color: var(--muted); }
.sza-menu .sep { height: 1px; margin: 6px 4px; background: var(--line); }
.sza-menu .danger { color: var(--bad); }
.sza-menu .danger svg { color: var(--bad); }
.sza-menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.sza-menu-head .n { font-weight: 600; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sza-menu-head .e { font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sza-nav-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.sza-btn-plan {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--accent);
  transition: background 0.15s ease;
}
.sza-btn-plan:hover { background: var(--accent-hover); }
.sza-user { position: relative; }
.sza-user > button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 8px 0 4px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sza-user > button:hover { border-color: var(--line-strong); background: var(--bg-2); }
.sza-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #1d3cf0, #0a25dc);
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.sza-user .uname { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sza-user svg.chev { width: 14px; height: 14px; opacity: 0.6; }

.sza-burger {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  align-items: center; justify-content: center; cursor: pointer; color: var(--text);
}
.sza-burger svg { width: 18px; height: 18px; }

/* Mobile drawer. It lives inside the sticky header, whose backdrop-filter makes it the
   containing block for fixed children — so anchor it to the header's bottom edge
   with absolute positioning and size it to the rest of the viewport instead. */
.sza-drawer {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 45;
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
  background: #fff; border-top: 1px solid var(--line);
  padding: 12px 20px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.sza-drawer.is-open { display: block; }
@media (min-width: 901px) { .sza-drawer { display: none !important; } }
.sza-drawer a {
  display: flex; align-items: center; justify-content: space-between;
  height: 46px; padding: 0 6px; border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: 500; color: var(--text);
}
.sza-drawer a.sub { padding-left: 22px; color: var(--muted); font-weight: 500; font-size: 14px; height: 42px; }
.sza-drawer .grp { margin-top: 14px; padding: 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.sza-drawer a.danger { color: var(--bad); border-bottom: 0; }

/* ---------- Page ---------- */
body.sza-body { display: flex; flex-direction: column; min-height: 100vh; }
.sza-main { flex: 1 0 auto; padding: 32px 0 56px; }
.sza-page { display: grid; gap: 20px; }

/* Expiry / notice banner */
.sza-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--warn-line); background: var(--warn-soft); color: var(--warn);
  font-size: 14px;
}
.sza-banner svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sza-banner b { font-weight: 600; }
.sza-banner .grow { flex: 1 1 220px; min-width: 0; }
.sza-banner .act {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px;
  background: var(--warn); color: #fff; font-size: 13px; font-weight: 600;
}
.sza-banner .act:hover { filter: brightness(0.95); }
.sza-banner .x { border: 0; background: transparent; color: inherit; opacity: 0.6; cursor: pointer; font-size: 18px; line-height: 1; padding: 4px; }
.sza-banner .x:hover { opacity: 1; }
.sza-banner.bad { border-color: var(--bad-line); background: var(--bad-soft); color: var(--bad); }
.sza-banner.bad .act { background: var(--bad); }

/* Header row */
.sza-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.sza-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.sza-head h1 { margin-top: 6px; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.03em; }
.sza-head h1 .accent { color: var(--accent); }
.sza-head p { margin-top: 6px; color: var(--muted); font-size: 15px; max-width: 560px; }
.sza-head p strong { color: var(--text); font-weight: 600; }
/* Dashboard greeting under the page title */
.sza-head .sza-greet {
  margin-top: 8px; max-width: none;
  color: var(--muted); font-size: 17px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3;
}
.sza-head .sza-greet-name {
  font-weight: 700; color: var(--accent);
  background: linear-gradient(90deg, #1d3cf0 0%, var(--accent) 55%, #5b73ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.sza-head .sza-greet-dot { color: var(--text); font-weight: 700; }
/* Dashboard uses the same page-title header as the other pages; .sza-page's
   grid gap already provides the spacing below it. */
.sza-page > .sza-page-head { margin-bottom: 0; }

.sza-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px 0 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: #fff;
  font-size: 13.5px; font-weight: 600; color: var(--text);
  box-shadow: var(--shadow-sm);
}
.sza-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15); }
.sza-chip.trial .dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(10, 37, 220, 0.15); }
.sza-chip.none .dot { background: var(--faint); box-shadow: 0 0 0 3px rgba(138, 147, 163, 0.18); }
.sza-chip .sub { color: var(--muted); font-weight: 500; }
.sza-chip a { color: var(--accent); }

/* Cards */
.sza-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.sza-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.sza-card-head h2 { font-size: 15px; font-weight: 600; }
.sza-card-head .more { font-size: 13px; font-weight: 600; color: var(--accent); }
.sza-card-head .more:hover { color: var(--accent-hover); }
.sza-card-body { padding: 20px; }

/* Downloader */
.sza-dl { position: relative; overflow: hidden; }
.sza-dl::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(40% 60% at 8% 0%, rgba(178, 208, 255, 0.45), transparent 70%),
    radial-gradient(34% 50% at 96% 10%, rgba(212, 199, 255, 0.40), transparent 70%);
}
.sza-dl > * { position: relative; z-index: 1; }
.sza-dl-body { padding: 28px 28px 24px; }
.sza-dl h2 { font-size: 20px; letter-spacing: -0.025em; }
.sza-dl .lede { margin-top: 4px; color: var(--muted); font-size: 14.5px; }
.sza-dl-form { display: flex; gap: 10px; margin-top: 18px; }
.sza-dl-field { position: relative; flex: 1 1 auto; min-width: 0; }
.sza-dl-field svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--faint); pointer-events: none; }
body.sza-body .sza-dl-form input[type="url"] {
  display: block; width: 100%; height: 50px; margin: 0;
  padding: 0 14px 0 42px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: #fff; color: var(--text);
  font: inherit; font-size: 15px; line-height: 48px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none; appearance: none;
}
body.sza-body .sza-dl-form input[type="url"]::placeholder { color: var(--faint); }
body.sza-body .sza-dl-form input[type="url"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(10, 37, 220, 0.12); background: #fff; }
body.sza-body .sza-dl-form input.is-invalid { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12); }

.sza-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px; border-radius: 12px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.sza-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.sza-btn:active { transform: translateY(1px); }
.sza-btn:disabled { opacity: 0.6; cursor: default; }
.sza-btn svg { width: 18px; height: 18px; }
.sza-btn-sm { height: 38px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; }
.sza-btn-ghost { background: #fff; border-color: var(--line-strong); color: var(--text); box-shadow: var(--shadow-sm); }
.sza-btn-ghost:hover { background: var(--bg-2); border-color: #b3c3e6; color: var(--text); }

.sza-dl-msg {
  display: none; margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--good-line); background: var(--good-soft); color: var(--good);
  font-size: 13.5px; font-weight: 500;
}
.sza-dl-msg.is-on { display: block; }
.sza-dl-msg.bad { border-color: var(--bad-line); background: var(--bad-soft); color: var(--bad); }

.sza-dl-foot {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  min-width: 0;
}
.sza-platforms { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sza-platforms .lbl { font-size: 12.5px; font-weight: 600; color: var(--faint); margin-right: 4px; }
.sza-platforms span.pl {
  display: inline-flex; align-items: center; height: 30px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.sza-platforms span.pl img { height: 16px; width: auto; }
.sza-platforms span.pl img[src*="magnific"] { height: 12px; } /* wide Magnific wordmark */
.sza-platforms span.pl.locked { opacity: 0.45; filter: grayscale(1); }
.sza-example {
  font-size: 13px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
  min-width: 0; max-width: 100%; overflow: hidden;
}
.sza-example > span { flex: 0 0 auto; white-space: nowrap; }
.sza-example a {
  display: block; min-width: 0; flex: 1 1 auto;
  font-family: var(--mono); font-size: 12px; color: var(--accent);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: opacity 0.3s ease;
}
.sza-example a.fade-out { opacity: 0; }
.sza-example a:hover { text-decoration: underline; }

/* Grid of secondary cards */
.sza-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.sza-col-7 { grid-column: span 7; }
.sza-col-5 { grid-column: span 5; }
.sza-col-6 { grid-column: span 6; }
.sza-col-4 { grid-column: span 4; }

/* Plan list */
.sza-plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sza-plan {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2);
}
.sza-plan .ic {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--accent);
}
.sza-plan .ic svg { width: 18px; height: 18px; }
.sza-plan .t { font-weight: 600; font-size: 14.5px; color: var(--text); }
.sza-plan .m { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.sza-plan .m .mono { font-weight: 600; color: var(--text); }
.sza-badge {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--good); background: var(--good-soft); border: 1px solid var(--good-line);
}
.sza-badge.warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.sza-badge.info { color: var(--accent); background: var(--accent-soft); border-color: #c7d6ff; }
.sza-badge.muted { color: var(--muted); background: #fff; border-color: var(--line-strong); }

.sza-empty { text-align: center; padding: 18px 10px 8px; }
.sza-empty .ic { width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.sza-empty .ic svg { width: 22px; height: 22px; }
.sza-empty h3 { font-size: 16px; }
.sza-empty p { margin: 6px auto 16px; color: var(--muted); font-size: 14px; max-width: 360px; }

/* Payment result pages: /thanks and /cancel
   Sit in .sza-wrap, so stay full-width of the nav/footer. */
.sz-checkout-state {
  width: 100%;
  margin: 8px 0 8px;
  text-align: center;
}
.sz-checkout-status-icon {
  width: 68px; height: 68px; margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 22px;
}
.sz-checkout-status-icon svg { width: 34px; height: 34px; }
.sz-checkout-status-icon-success {
  color: var(--good); background: var(--good-soft);
  border: 1px solid var(--good-line);
  box-shadow: 0 12px 30px -18px rgba(21, 128, 61, 0.55);
}
.sz-checkout-status-icon-warn {
  color: var(--warn); background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  box-shadow: 0 12px 30px -18px rgba(180, 83, 9, 0.45);
}
.sz-checkout-status-icon-pending {
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid #c7d6ff;
}
.sz-checkout-status-pulse { animation: szCheckoutPulse 1.8s ease-in-out infinite; }
@keyframes szCheckoutPulse {
  50% { box-shadow: 0 0 0 10px rgba(10, 37, 220, 0.07); }
}
.sz-checkout-heading { max-width: 610px; margin: 0 auto 28px; }
.sz-checkout-eyebrow {
  display: block; margin-bottom: 8px;
  color: var(--accent); font-size: 12px; line-height: 1.2;
  font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
}
.sz-checkout-cancelled .sz-checkout-eyebrow { color: var(--warn); }
.sz-checkout-heading h1 {
  margin: 0; color: var(--text);
  font-size: clamp(28px, 4vw, 42px); font-weight: 700;
  line-height: 1.12; letter-spacing: -0.035em;
}
.sz-checkout-heading p {
  margin: 12px auto 0; color: var(--muted);
  font-size: 15.5px; line-height: 1.65;
}
.sz-checkout-reference {
  width: fit-content; margin: -12px auto 22px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 12px; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; color: var(--muted); font-size: 12.5px;
}
.sz-checkout-reference strong { color: var(--text); font-family: var(--mono); font-weight: 500; }
.sz-checkout-errors { margin: 0 0 18px; text-align: left; }
.sz-checkout-errors ul,
.sz-checkout-errors .errors,
.sz-checkout-form .errors {
  margin: 0; padding: 12px 16px; list-style: none;
  border: 1px solid var(--bad-line); border-radius: 12px;
  background: var(--bad-soft); color: var(--bad); font-size: 13.5px;
}
.sz-checkout-errors li,
.sz-checkout-form .errors li { margin: 0; padding: 2px 0; }
.sz-checkout-form-card,
.sz-checkout-receipt {
  overflow: hidden; text-align: left;
  border: 1px solid var(--line); border-radius: 16px;
  background: #fff; box-shadow: var(--shadow-md);
}
.sz-checkout-form-head,
.sz-checkout-section-title {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 22px; border-bottom: 1px solid var(--line);
}
.sz-checkout-form-head h2,
.sz-checkout-section-title h2 { margin: 0; color: var(--text); font-size: 16px; font-weight: 650; }
.sz-checkout-form-head p,
.sz-checkout-section-title p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.sz-checkout-section-title > a { color: var(--accent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.sz-checkout-secure {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--good); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.sz-checkout-secure svg { width: 15px; height: 15px; }
.sz-checkout-form { padding: 22px; }
/* Fallback styling for aMember's own Am_Form output inside a checkout card.
   Selectors carry .sza-content so they beat the generic ".sza-content .am-form form"
   card rules further down. */
.sza-content .sz-checkout-form .am-form { margin: 0; }
.sza-content .sz-checkout-form .am-form form {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.sza-content .sz-checkout-form .am-form fieldset { margin: 0; padding: 0; border: 0; }
.sza-content .sz-checkout-form .am-form fieldset > legend { display: none; }
.sza-content .sz-checkout-form .am-form div.row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  margin: 0; padding: 0 0 16px; border: 0;
}
.sza-content .sz-checkout-form .am-form div.row:last-child { padding-bottom: 0; }
.sza-content .sz-checkout-form .am-form div.row[id^="row-save"] {
  margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line);
}
.sza-content .sz-checkout-form .am-form div.element-title,
.sza-content .sz-checkout-form .am-form div.element {
  width: auto; margin: 0; padding: 0; float: none; text-align: left; background: transparent;
}
.sza-content .sz-checkout-form .am-form div.element-title label {
  color: var(--faint); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.sza-content .sz-checkout-form .am-form div.element-title span.required { display: none; }
.sza-content .sz-checkout-form .am-form div.element { display: grid; gap: 10px; }
.sza-content .sz-checkout-form .am-form div.element br { display: none; }
.sza-content .sz-checkout-form .am-form div.element label,
.sza-content .sz-checkout-form .am-form .advradio-options label {
  /* flex + zero font-size neutralises the " " text node aMember emits after the radio */
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px;
  width: 100%; max-width: none; margin: 0; font-size: 0; line-height: 0;
  padding: 13px 15px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg-2); color: var(--text); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.sza-content .sz-checkout-form .am-form div.element label:hover { border-color: var(--line-strong); background: #fff; }
.sza-content .sz-checkout-form .am-form div.element label:has(input:checked) {
  border-color: var(--accent); background: #fff; box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-sm);
}
.sza-content .sz-checkout-form .am-form div.element label > input[type="radio"] {
  position: static; left: auto; top: auto; flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent);
}
.sza-content .sz-checkout-form .am-form .am-paysystem-title {
  display: block; flex: 1 1 0; min-width: 0; color: var(--text); font-size: 14.5px; font-weight: 600; line-height: 1.35;
}
.sza-content .sz-checkout-form .am-form .am-paysystem-desc {
  display: block; flex: 0 0 100%; margin: 3px 0 0; padding-left: 30px;
  color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.45;
}
.sza-content .sz-checkout-form .am-form input[type="radio"] { accent-color: var(--accent); }
.sza-content .sz-checkout-form input[type="submit"] {
  width: 100%; min-height: 48px; padding: 0 22px;
  border: 1px solid var(--accent); border-radius: 12px;
  background: var(--accent); color: #fff;
  font: 600 15px/1 var(--sans); cursor: pointer;
}
.sza-content .sz-checkout-form input[type="submit"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Cancel page: native payment-method chooser (theme1/cancel.phtml) */
.sz-pay-form { padding: 20px 22px 22px; text-align: left; }
.sz-pay-options { display: grid; gap: 10px; }
.sz-pay-option {
  position: relative; display: grid; grid-template-columns: 20px 42px minmax(0, 1fr);
  align-items: center; column-gap: 14px;
  margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-2); color: var(--text); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.sz-pay-option:hover { border-color: var(--line-strong); background: #fff; }
.sz-pay-option > input {
  position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
}
.sz-pay-radio {
  position: relative; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sz-pay-radio::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff;
  transform: scale(0); transition: transform 0.15s ease;
}
.sz-pay-option:has(> input:checked) {
  border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow-sm);
}
.sz-pay-option:has(> input:checked) .sz-pay-radio { border-color: var(--accent); background: var(--accent); }
.sz-pay-option:has(> input:checked) .sz-pay-radio::after { transform: scale(1); }
.sz-pay-option:has(> input:focus-visible) { box-shadow: 0 0 0 1px var(--accent) inset, 0 0 0 4px rgba(10, 37, 220, 0.14); }
.sz-pay-icon {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.sz-pay-icon svg { width: 21px; height: 21px; }
.sz-pay-option:has(> input:checked) .sz-pay-icon { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.sz-pay-text { display: grid; gap: 2px; min-width: 0; }
.sz-pay-title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  color: var(--text); font-size: 14.5px; font-weight: 600; line-height: 1.3;
}
.sz-pay-badge {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-soft);
  color: var(--accent); font-size: 11px; font-weight: 600; font-style: normal; letter-spacing: 0.01em; white-space: nowrap;
}
.sz-pay-desc { color: var(--muted); font-size: 13px; line-height: 1.45; }
.sz-pay-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
}
.sz-pay-note { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.sz-pay-note svg { flex: none; width: 16px; height: 16px; color: var(--good); }
.sz-pay-submit { flex: none; height: 48px; }
.sz-checkout-meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 20px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: left;
}
.sz-checkout-meta > div { min-width: 0; padding: 15px 18px; border-right: 1px solid var(--line); }
.sz-checkout-meta > div:last-child { border-right: 0; }
.sz-checkout-meta span { display: block; margin-bottom: 5px; color: var(--faint); font-size: 11px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.sz-checkout-meta strong { display: block; overflow: hidden; color: var(--text); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sz-checkout-receipt { margin-top: 0; box-shadow: var(--shadow-sm); }
.sz-checkout-receipt .am-receipt { margin: 0; }
.sz-checkout-receipt .am-receipt-content { overflow-x: auto; padding: 0; border: 0; }
.sz-checkout-receipt .am-receipt-table { width: 100%; min-width: 590px; margin: 0; border-collapse: collapse; }
.sz-checkout-receipt .am-receipt-table th {
  padding: 11px 18px; border: 0; border-bottom: 1px solid var(--line);
  background: var(--bg-2); color: var(--muted); font-size: 11px;
  font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
}
.sz-checkout-receipt .am-receipt-table td {
  padding: 13px 18px; border: 0; border-bottom: 1px solid var(--line);
  background: #fff; color: var(--text); font-size: 13px;
}
.sz-checkout-receipt .am-receipt-table tr:last-child td { border-bottom: 0; }
.sz-checkout-receipt .am-receipt-row-delimiter { display: none; }
.sz-checkout-receipt .am-receipt-price,
.sz-checkout-receipt .am-receipt-qty,
.sz-checkout-receipt .am-receipt-unit-price { text-align: right; white-space: nowrap; }
.sz-checkout-receipt .am-receipt-row-total td { background: var(--accent-soft); color: var(--accent); }
.sz-checkout-receipt .am-receipt-row-terms td { color: var(--muted); font-size: 12px; }
.sz-checkout-login-details {
  margin-top: 16px; padding: 16px 18px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  color: var(--muted); font-size: 13.5px;
}
.sz-checkout-login-details .am-block { margin: 0; padding: 0; border: 0; background: transparent; }
.sz-checkout-notice,
.sz-checkout-countdown {
  margin: 0 0 20px; padding: 15px 18px; text-align: left;
  border: 1px solid #c7d6ff; border-radius: 12px;
  background: var(--accent-soft); color: #233778; font-size: 13.5px; line-height: 1.55;
}
.sz-checkout-countdown { font-weight: 600; text-align: center; }
.sz-checkout-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 20px;
}
.sz-checkout-actions-center { justify-content: center; flex-wrap: wrap; }
.sz-checkout-help { color: var(--accent); font-size: 13.5px; font-weight: 600; }

@media (max-width: 680px) {
  .sz-checkout-state { margin-top: 4px; }
  .sz-checkout-heading { margin-bottom: 22px; }
  .sz-checkout-heading h1 { font-size: 29px; }
  .sz-checkout-form-head,
  .sz-checkout-section-title { align-items: flex-start; padding: 17px; }
  .sz-checkout-secure { display: none; }
  .sz-checkout-form { padding: 17px; }
  .sz-pay-form { padding: 16px 17px 17px; }
  .sz-pay-option { grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; padding: 13px 14px; }
  .sz-pay-icon { display: none; }
  .sz-pay-foot { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .sz-pay-submit { width: 100%; }
  .sz-pay-note { justify-content: center; text-align: center; }
  .sz-checkout-meta { grid-template-columns: 1fr; }
  .sz-checkout-meta > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .sz-checkout-meta > div:last-child { border-bottom: 0; }
  .sz-checkout-actions { flex-direction: column; }
  .sz-checkout-actions .sza-btn { width: 100%; }
}

/* Quick links */
.sza-ql { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sza-ql a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.sza-ql a:hover { border-color: var(--line-strong); background: var(--bg-2); transform: translateY(-1px); }
.sza-ql .ic { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; }
.sza-ql .ic svg { width: 17px; height: 17px; }
.sza-ql .t { font-weight: 600; font-size: 14px; color: var(--text); }
.sza-ql .d { font-size: 12.5px; color: var(--muted); }

/* Support */
.sza-support-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sza-support-row:first-child { padding-top: 0; }
.sza-support-row:last-child { border-bottom: 0; padding-bottom: 0; }
.sza-support-row .t { font-weight: 600; font-size: 14px; }
.sza-support-row .d { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.sza-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.sza-status .dot { width: 7px; height: 7px; border-radius: 50%; }
.sza-status.on { color: var(--good); } .sza-status.on .dot { background: var(--good); }
.sza-status.off { color: var(--faint); } .sza-status.off .dot { background: var(--faint); }

/* Affiliate card */
.sza-aff { background: linear-gradient(135deg, #0f1420 0%, #1a2340 100%); color: #fff; border-color: #1a2340; }
.sza-aff .sza-card-body { padding: 24px; }
.sza-aff h2 { color: #fff; font-size: 18px; }
.sza-aff p { color: rgba(255, 255, 255, 0.72); font-size: 14px; margin-top: 6px; }
.sza-aff-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0; }
.sza-aff-tiers div { padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); }
.sza-aff-tiers b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.sza-aff-tiers span { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.sza-aff .sza-btn { background: #fff; border-color: #fff; color: #0f1420; }
.sza-aff .sza-btn:hover { background: #eef2ff; border-color: #eef2ff; color: #0f1420; }

/* Footer */
.sza-foot {
  border-top: 1px solid var(--line);
  background: #fff;
}
.sza-foot-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap;
  padding: 18px 0;
  font-size: 12.5px; color: var(--faint);
}
.sza-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.sza-foot a:hover { color: var(--text); }

/* Modals */
.sza-modal-bd {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(11, 18, 32, 0.55);
  backdrop-filter: blur(2px);
}
.sza-modal-bd.is-open { display: flex; }
.sza-modal {
  width: min(520px, 100%); background: #fff; border-radius: 16px;
  border: 1px solid var(--line); box-shadow: 0 30px 80px -20px rgba(16, 24, 40, 0.4);
  overflow: hidden;
  animation: sza-pop 0.18s ease-out;
}
@keyframes sza-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.sza-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.sza-modal-head h3 { font-size: 16px; }
.sza-modal-x { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--faint); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.sza-modal-x:hover { background: var(--bg-2); color: var(--text); }
.sza-modal-body { padding: 20px; color: var(--muted); font-size: 14.5px; }
.sza-modal-body p + p { margin-top: 8px; }
.sza-modal-body b { color: var(--text); font-weight: 600; }
.sza-modal-acts { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 20px 20px; }
.sza-modal-acts .sza-btn { flex: 1 1 160px; }
.sza-modal-alert {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--bad-line); background: var(--bad-soft); color: var(--bad); font-weight: 600; font-size: 13.5px;
}
.sza-modal-alert svg { width: 18px; height: 18px; flex: 0 0 auto; }
.sza-modal-body .sza-modal-fine { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.sza-modal-fine a { color: var(--accent); font-weight: 500; text-decoration: none; }
.sza-modal-fine a:hover { text-decoration: underline; }

/* =====================================================================
   Generic content skin — every aMember page rendered inside layout-app
   (payment history, helpdesk, affiliate, signup, profile…). Scoped to
   .sza-content so the dashboard markup above is untouched.
   ===================================================================== */
.sza-page-head { margin-bottom: 22px; }
.sza-page-head h1 { margin-top: 0; }
.sza-content { display: grid; gap: 18px; align-content: start; }
.sza-content > * { min-width: 0; }
.sza-content > script, .sza-content > style, .sza-content > link { display: none; }
.sza-content .am-form { margin: 0; }
.sza-dim { color: var(--faint); }
.sza-guest-link { font-size: 14px; font-weight: 500; color: var(--muted); }
.sza-guest-link:hover { color: var(--text); }
.sza-guest-link[aria-current="page"] { color: var(--text); font-weight: 600; }

/* Headings produced by aMember (grid titles, helpdesk ticket subject…) */
.sza-content h1 { font-size: 22px; letter-spacing: -0.025em; line-height: 1.25; }
.sza-content h1 + h1 { margin-top: 8px; }
/* The dashboard renders its own page header inside .sza-content; keep it the
   same size as the layout-rendered title on every other page. */
.sza-content .sza-page-head h1 { margin-top: 0; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.03em; line-height: 1.2; }
.sza-content h2 { font-size: 17px; }
.sza-content h3 { font-size: 15px; }
.sza-content > p { color: var(--muted); }
.sza-content a.link, .sza-content a.local, .sza-content .grow a, .sza-content p a { color: var(--accent); font-weight: 500; }
.sza-content a.link:hover, .sza-content a.local:hover, .sza-content p a:hover { color: var(--accent-hover); text-decoration: underline; }
.sza-content .am-helpdesk-ticket-category { color: var(--muted); font-weight: 500; font-size: 15px; }

/* Notices */
.sza-notice {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-size: 14px; box-shadow: var(--shadow-sm);
}
.sza-notice svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); }
.sza-notice .grow { flex: 1 1 auto; min-width: 0; }
.sza-notice strong { color: var(--text); font-weight: 600; }
.sza-notice a { color: var(--accent); font-weight: 600; }
.sza-notice a:hover { text-decoration: underline; }
.sza-notice.tg { border-color: #bfe3f7; background: #f2faff; color: #0b4f7a; }
.sza-notice.tg svg { color: #1d9bf0; }
.sza-notice.tg a { color: #0b6fb0; }
.sza-content .am-info, .sza-content .am-notice, .sza-content .warning_box {
  padding: 12px 16px; border-radius: 12px; font-size: 14px;
  border: 1px solid #c7d6ff; background: var(--accent-soft); color: #1a2b7a;
}
.sza-content .am-info a, .sza-content .warning_box a { color: inherit; font-weight: 600; text-decoration: underline; }
.sza-content .am-notice { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }

/* ---------- Rich text authored in aMember admin (affiliate intro, FAQ answers, etc.) ----------
   This HTML arrives with whatever markup/inline styling the admin typed, so force the theme's
   typography and neutralise legacy colours, fonts and Bootstrap-era classes. */
.sza-content .aff-intro, .sza-content .sza-richtext {
  padding: 22px 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: 14.5px; line-height: 1.65; color: var(--text); overflow-wrap: anywhere;
}
.sza-content .aff-intro *, .sza-content .sza-richtext * {
  font-family: var(--sans) !important; line-height: inherit; max-width: 100%;
}
.sza-content .aff-intro > *:first-child, .sza-content .sza-richtext > *:first-child { margin-top: 0 !important; }
.sza-content .aff-intro > *:last-child, .sza-content .sza-richtext > *:last-child { margin-bottom: 0 !important; }
.sza-content .aff-intro p, .sza-content .sza-richtext p { margin: 0 0 10px; color: var(--text); }
.sza-content .aff-intro h1, .sza-content .aff-intro h2, .sza-content .aff-intro h3, .sza-content .aff-intro h4, .sza-content .aff-intro h5, .sza-content .aff-intro h6,
.sza-content .sza-richtext h1, .sza-content .sza-richtext h2, .sza-content .sza-richtext h3, .sza-content .sza-richtext h4, .sza-content .sza-richtext h5, .sza-content .sza-richtext h6 {
  margin: 18px 0 8px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--text) !important; background: none !important; border: 0 !important; padding: 0 !important; text-align: left !important;
}
.sza-content .aff-intro h1, .sza-content .sza-richtext h1 { font-size: 20px; }
.sza-content .aff-intro h2, .sza-content .sza-richtext h2 { font-size: 17px; }
.sza-content .aff-intro h3, .sza-content .sza-richtext h3 { font-size: 15.5px; }
.sza-content .aff-intro h4, .sza-content .aff-intro h5, .sza-content .aff-intro h6, .sza-content .sza-richtext h4, .sza-content .sza-richtext h5, .sza-content .sza-richtext h6 { font-size: 14.5px; }
.sza-content .aff-intro ul, .sza-content .aff-intro ol, .sza-content .sza-richtext ul, .sza-content .sza-richtext ol { margin: 0 0 12px; padding: 0 0 0 22px; }
.sza-content .aff-intro ul, .sza-content .sza-richtext ul { list-style: disc !important; } .sza-content .aff-intro ol, .sza-content .sza-richtext ol { list-style: decimal !important; }
.sza-content .aff-intro li, .sza-content .sza-richtext li { display: list-item; list-style: inherit; }
.sza-content .aff-intro li, .sza-content .sza-richtext li { margin: 4px 0; padding: 0; background: none; border: 0; color: var(--text); }
.sza-content .aff-intro li::marker, .sza-content .sza-richtext li::marker { color: var(--accent); }
.sza-content .aff-intro a, .sza-content .sza-richtext a { color: var(--accent) !important; font-weight: 500; text-decoration: none; }
.sza-content .aff-intro a:hover, .sza-content .sza-richtext a:hover { text-decoration: underline; }
.sza-content .aff-intro strong, .sza-content .aff-intro b, .sza-content .sza-richtext strong, .sza-content .sza-richtext b { font-weight: 600; color: var(--text); }
.sza-content .aff-intro em, .sza-content .aff-intro i { font-style: italic; }
.sza-content .aff-intro span, .sza-content .aff-intro font, .sza-content .aff-intro div, .sza-content .aff-intro p, .sza-content .aff-intro li, .sza-content .aff-intro td, .sza-content .aff-intro th,
.sza-content .sza-richtext span, .sza-content .sza-richtext font, .sza-content .sza-richtext div, .sza-content .sza-richtext td, .sza-content .sza-richtext th { color: inherit !important; }
.sza-content .aff-intro div, .sza-content .aff-intro section, .sza-content .aff-intro article, .sza-content .aff-intro p, .sza-content .aff-intro span, .sza-content .aff-intro font,
.sza-content .sza-richtext div, .sza-content .sza-richtext section, .sza-content .sza-richtext p, .sza-content .sza-richtext span { background: transparent !important; font-size: inherit !important; }
.sza-content .aff-intro small, .sza-content .sza-richtext small { font-size: 13px !important; color: var(--muted) !important; }
.sza-content .aff-intro hr, .sza-content .sza-richtext hr { margin: 16px 0; border: 0; border-top: 1px solid var(--line); }
.sza-content .aff-intro img, .sza-content .sza-richtext img { display: block; max-width: 100%; height: auto; border-radius: 10px; margin: 12px 0; }
.sza-content .aff-intro blockquote, .sza-content .sza-richtext blockquote { margin: 12px 0; padding: 10px 16px; border-left: 3px solid var(--accent); background: var(--bg-2) !important; border-radius: 0 10px 10px 0; color: var(--muted); }
.sza-content .aff-intro code, .sza-content .aff-intro pre, .sza-content .sza-richtext code, .sza-content .sza-richtext pre { font-family: var(--mono) !important; font-size: 13px !important; background: var(--bg-2) !important; border-radius: 6px; padding: 2px 6px; color: var(--text); }
.sza-content .aff-intro pre, .sza-content .sza-richtext pre { padding: 12px 14px; overflow: auto; white-space: pre-wrap; }
.sza-content .aff-intro table, .sza-content .sza-richtext table { width: 100% !important; margin: 12px 0; border-collapse: collapse; border-spacing: 0; font-size: 14px; border: 1px solid var(--line) !important; border-radius: 10px; overflow: hidden; }
.sza-content .aff-intro th, .sza-content .aff-intro td, .sza-content .sza-richtext th, .sza-content .sza-richtext td {
  padding: 10px 14px !important; text-align: left; vertical-align: top; border: 0 !important; border-bottom: 1px solid var(--line) !important; background: #fff !important;
}
.sza-content .aff-intro th, .sza-content .sza-richtext th, .sza-content .aff-intro thead td { background: var(--bg-2) !important; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted) !important; }
.sza-content .aff-intro tr:last-child td, .sza-content .sza-richtext tr:last-child td { border-bottom: 0 !important; }
/* Bootstrap-era classes that may be embedded in admin HTML */
.sza-content .aff-intro .card, .sza-content .aff-intro .alert, .sza-content .aff-intro .well, .sza-content .aff-intro .panel, .sza-content .aff-intro .jumbotron, .sza-content .aff-intro .box,
.sza-content .sza-richtext .card, .sza-content .sza-richtext .alert, .sza-content .sza-richtext .well, .sza-content .sza-richtext .panel {
  margin: 12px 0; padding: 14px 16px; border: 1px solid var(--line) !important; border-radius: 12px; background: var(--bg-2) !important; box-shadow: none;
}
.sza-content .aff-intro .card-body, .sza-content .aff-intro .card-header, .sza-content .aff-intro .panel-body, .sza-content .aff-intro .panel-heading { padding: 0; border: 0; background: none !important; }
.sza-content .aff-intro .card-header, .sza-content .aff-intro .panel-heading, .sza-content .aff-intro .card-title { font-weight: 600; margin-bottom: 8px; }
.sza-content .aff-intro .row, .sza-content .sza-richtext .row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.sza-content .aff-intro [class*="col-"], .sza-content .sza-richtext [class*="col-"] { flex: 1 1 220px; padding: 0; max-width: none; width: auto; }
.sza-content .aff-intro .btn, .sza-content .aff-intro a.button, .sza-content .sza-richtext .btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--accent) !important;
  background: var(--accent) !important; color: #fff !important; font-size: 14px !important; font-weight: 600; text-decoration: none !important; box-shadow: none;
}
.sza-content .aff-intro .btn:hover, .sza-content .sza-richtext .btn:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.sza-content .aff-intro .badge, .sza-content .aff-intro .label, .sza-content .sza-richtext .badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--accent-soft) !important; color: var(--accent) !important; font-size: 12px !important; font-weight: 600;
}
.sza-content .aff-intro .text-center { text-align: left !important; }
.sza-content .aff-intro > br:first-child, .sza-content .aff-intro > br:last-child { display: none; }
.sza-content .aff-intro style, .sza-content .aff-intro script, .sza-content .sza-richtext style, .sza-content .sza-richtext script { display: none; }

/* Errors */
.sza-content div.errors ul, .sza-content ul.error, .sza-content ul.errors {
  margin: 0; padding: 12px 16px 12px 36px; border-radius: 12px; list-style: disc;
  border: 1px solid var(--bad-line); background: var(--bad-soft); color: var(--bad); font-size: 14px;
}
.sza-content div.errors ul li, .sza-content ul.error li, .sza-content ul.errors li { margin: 2px 0; padding: 0; background: none; border: 0; color: var(--bad); }

/* Tabs (aff / helpdesk sub-navigation rendered by aMember) */
.sza-content ul.am-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;
  border: 0; background: none; box-shadow: none;
}
.sza-content ul.am-tabs li { margin: 0; padding: 0; border: 0; background: none; float: none; }
.sza-content ul.am-tabs a, .sza-content ul.am-tabs li.normal > a, .sza-content ul.am-tabs li.active > a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--muted);
  font-size: 13.5px; font-weight: 600; text-decoration: none; box-shadow: var(--shadow-sm);
}
.sza-content ul.am-tabs li.normal > a:hover { color: var(--text); background: var(--bg-2); }
.sza-content ul.am-tabs li.active > a { background: var(--text); border-color: var(--text); color: #fff; }
.sza-content ul.am-tabs span.arrow { display: none; }

/* ---------- Cards for aMember blocks ---------- */
.sza-content .grid-container,
.sza-content .payment-table-card,
.sza-content .payout-table-card,
.sza-content .aff-stats-card,
.sza-content .aff-general-link-card,
.sza-content .aff-banner-card,
.sza-content .am-aff-banner-preview,
.sza-content .am-block-nodata,
.sza-content .am-helpdesk-ticket,
.sza-content .am-helpdesk-message,
.sza-content .am-form form,
.sza-content .am-helpdesk-faq-list {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.sza-content .aff-stats-card .grid-container { border: 0; box-shadow: none; border-radius: 0; }
.sza-content .payment-nodata, .sza-content .payout-nodata { padding: 28px 20px 30px; }
.sza-content .am-block-nodata { padding: 36px 20px; text-align: center; color: var(--muted); }
.sza-content .am-block-nodata p { margin: 0; }

/* ---------- Tables ---------- */
.sza-content .grid-container { overflow-x: auto; }
.sza-content table.grid,
.sza-content .payment-table-card table,
.sza-content .payout-table-card table,
.sza-content .aff-stats-card table {
  width: 100%; border-collapse: collapse; border-spacing: 0; margin: 0;
  font-size: 14px; color: var(--text); background: transparent; border: 0;
}
.sza-content table.grid th,
.sza-content .payment-table-card th,
.sza-content .payout-table-card th,
.sza-content .aff-stats-card th {
  padding: 12px 16px; text-align: left; white-space: nowrap;
  background: var(--bg-2); color: var(--muted);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border: 0; border-bottom: 1px solid var(--line);
}
.sza-content table.grid th a { color: inherit; }
.sza-content table.grid th a.sorted, .sza-content table.grid th a:hover { color: var(--text); }
.sza-content table.grid td,
.sza-content .grid tr.grid-row > td,
.sza-content .payment-table-card td,
.sza-content .payout-table-card td,
.sza-content .aff-stats-card td {
  padding: 13px 16px; vertical-align: middle;
  color: var(--text); background: #fff !important;
  border: 0; border-bottom: 1px solid var(--line);
}
.sza-content table.grid tbody tr:last-child td,
.sza-content .payment-table-card tbody tr:last-child td,
.sza-content .payout-table-card tbody tr:last-child td,
.sza-content .aff-stats-card tr:last-child td { border-bottom: 0; }
.sza-content table.grid tr.grid-row:hover > td,
.sza-content .payment-table-card tbody tr:hover td,
.sza-content .payout-table-card tbody tr:hover td,
.sza-content .aff-stats-card tr.grid-row:hover td { background: var(--bg-2) !important; }
.sza-content .grid tr.grid-row.emphase > td { font-weight: 600; }
.sza-content .grid tr.grid-row.emphase > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.sza-content table.grid td a.link { color: var(--text); font-weight: 600; }
.sza-content table.grid td a.link:hover { color: var(--accent); text-decoration: none; }
.sza-content table.grid td time { color: var(--muted); white-space: nowrap; }
.sza-content .am-helpdesk-grid-msg-cnt {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px;
  margin-left: 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700;
}
.sza-content .am-helpdesk-grid-msg { color: var(--faint); font-size: 12.5px; }
.sza-content .payment-amount, .sza-content .aff-stats-metric { font-weight: 600; font-variant-numeric: tabular-nums; }
.sza-content .payment-invoice-link { color: var(--accent); font-weight: 600; }
.sza-content .payment-invoice-link:hover { text-decoration: underline; }
.sza-content .payment-table-card .payment-actions-th, .sza-content .payment-table-card .payment-actions { text-align: right; white-space: nowrap; width: 1%; }
.sza-content .payment-table-card td.payment-actions { padding-top: 8px; padding-bottom: 8px; }
.sza-content .payment-pdf-btn { height: 34px; padding: 0 12px; font-size: 13px; gap: 6px; width: auto; }
.sza-content .payment-pdf-btn svg { width: 15px; height: 15px; color: var(--muted); }
.sza-content .payment-pdf-btn:hover svg { color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sza-content .payment-refund-badge {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line);
}
.sza-content .aff-stats-total-row td { background: var(--bg-2) !important; font-weight: 700; border-top: 1px solid var(--line-strong); }
.sza-content .aff-stats-card td[colspan] { background: var(--bg-2) !important; }
.sza-content .grid-total { padding: 10px 16px; font-size: 13px; color: var(--muted); }

/* Grid chrome: filters, actions, pagination */
.sza-content .filter-wrap { padding: 0; margin: 0; background: none; border: 0; }
.sza-content .filter-wrap form.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sza-content .filter-wrap .filter-title { display: none; }
.sza-content .norecord-actions { display: flex; justify-content: flex-start; gap: 8px; margin: 0; padding: 0; background: none; border: 0; }

/* Grid wrapper (helpdesk tickets, etc.): aMember emits title, filter, actions, table and
   pagination as bare siblings. Stack them: title, then the primary action on its own line,
   then the filter / table / pagination, with consistent spacing between them. */
.sza-content .grid-wrap { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 16px; margin: 0; padding: 0; }
.sza-content .grid-wrap > h1 { order: 0; flex: 1 0 100%; margin: 0; min-width: 0; }
.sza-content .grid-wrap > .norecord-actions { order: 1; flex: 1 0 100%; margin: -2px 0 0; }
.sza-content .grid-wrap > .filter-wrap { order: 2; }
.sza-content .grid-wrap > .grid-container { order: 3; }
.sza-content .grid-wrap > .group-wrap { order: 4; }
.sza-content .grid-wrap > .am-pagination { order: 5; }
.sza-content .grid-wrap > .filter-wrap,
.sza-content .grid-wrap > .grid-container,
.sza-content .grid-wrap > .group-wrap,
.sza-content .grid-wrap > .am-pagination,
.sza-content .grid-wrap > .am-form,
.sza-content .grid-wrap > form { flex: 1 0 100%; width: 100%; min-width: 0; }
.sza-content .grid-wrap > .am-form, .sza-content .grid-wrap > form { order: 6; }
.sza-content .grid-wrap > script, .sza-content .grid-wrap > style { display: none; }
/* Empty grid: aMember leaves a header-only table; add a quiet empty state under it */
.sza-content .grid-wrap > .grid-container:has(table.grid tbody:empty)::after {
  content: "Nothing here yet."; display: block; padding: 28px 16px; text-align: center; font-size: 14px; color: var(--muted);
}
@media (max-width: 640px) {
  .sza-content .grid-wrap > .norecord-actions a { width: 100%; }
}
.sza-content .am-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; background: none; }
.sza-content .am-pagination a, .sza-content .am-pagination span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none;
}
.sza-content .am-pagination a:hover { color: var(--text); background: var(--bg-2); }
.sza-content .am-pagination .am-pagination-current { background: var(--text); border-color: var(--text); color: #fff; }

/* ---------- Buttons (aMember-generated) ---------- */
.sza-content a.button,
.sza-content input[type="button"],
.sza-content input[type="submit"],
.sza-content .norecord-actions a,
.sza-content .am-form input[type="submit"],
.sza-content .am-helpdesk-form input[type="submit"],
.sza-content .aff-link-copy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; margin: 0; border-radius: 10px;
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  -webkit-appearance: none; appearance: none;
}
.sza-content a.button:hover, .sza-content input[type="button"]:hover, .sza-content input[type="submit"]:hover,
.sza-content .norecord-actions a:hover, .sza-content .aff-link-copy-btn:hover {
  background: var(--accent-hover); border-color: var(--accent-hover); color: #fff;
}
.sza-content input[type="submit"]:active, .sza-content a.button:active { transform: translateY(1px); }
.sza-content input[type="submit"]:disabled, .sza-content input[type="button"]:disabled { opacity: 0.55; cursor: default; border-color: var(--accent); color: #fff; }
.sza-content input[type="button"],
.sza-content .filter-wrap .filter-button input,
.sza-content #custom_redirect-ok { background: #fff; border-color: var(--line-strong); color: var(--text); box-shadow: var(--shadow-sm); }
.sza-content input[type="button"]:hover, .sza-content .filter-wrap .filter-button input:hover { background: var(--bg-2); border-color: #b3c3e6; color: var(--text); }
.sza-content .aff-link-copy-btn { height: 34px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
.sza-content .aff-link-copy-btn.copied { background: var(--good); border-color: var(--good); }

/* ---------- Forms (Am_Form_Renderer_User output) ---------- */
.sza-content .am-form form {
  padding: 6px 24px 22px; margin: 0; text-align: left;
}
.sza-content .am-form fieldset { margin: 0; padding: 0; border: 0; background: none; }
.sza-content .am-form fieldset legend {
  display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 26px 0 8px;
  font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; border: 0; background: none;
}
.sza-content .am-form fieldset legend::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.sza-content .am-form fieldset legend:first-child + .fieldset { margin-top: 0; }
.sza-content .am-form .fieldset { padding: 0; }
/* aMember bricks emit helper rows that hold only <script>/<style> (e.g. the phone brick's
   row-phone_country_code_script-* and row-phone_sync-*); they'd otherwise render as empty
   bordered rows. Hide them. */
.sza-content .am-form div.row[id^="row-phone_country_code_script"],
.sza-content .am-form div.row[id^="row-phone_sync"],
.sza-content .am-form div.row:has(> .element:only-child):not(:has(> .element > :not(script, style))) { display: none; }
.sza-content .am-form div.row {
  display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 4px 24px; align-items: start;
  margin: 0; padding: 16px 0; border: 0; border-top: 1px solid var(--line); background: none;
  float: none; width: auto;
}
.sza-content .am-form div.row::after { display: none; }
/* Dividers are drawn as border-top so hidden helper rows / fieldset boundaries never
   produce stacked lines. The first row of any group carries no line. */
.sza-content .am-form form > div.row:first-child,
.sza-content .am-form form > #invoice-summary + div.row,
.sza-content .am-form .fieldset > div.row:first-child,
.sza-content .am-form div.row.row-head + div.row { border-top: 0; }
.sza-content .am-form div.row.no-label, .sza-content .am-form div.row.row-wide { grid-template-columns: minmax(0, 1fr); }
.sza-content .am-form div.row.no-label div.element-title { display: none; }
.sza-content .am-form div.row.row-head { display: flex; align-items: center; gap: 14px; padding: 26px 0 8px; border: 0; background: none; }
.sza-content .am-form div.row.row-head .element-title { padding: 0; }
.sza-content .am-form div.row.row-head .element-title label { font-size: 15px; }
.sza-content .am-form div.row.row-head .element { display: none; }
.sza-content .am-form div.row.row-head::after { display: block; content: ""; flex: 1 1 auto; height: 1px; background: var(--line); }
.sza-content .am-form div.row.row-highlight { background: none; }
.sza-content .am-form div.row.disabled { opacity: 0.55; }
.sza-content .am-form div.element-title,
.sza-content .am-form div.row.row-wide .element-title {
  width: auto; margin: 0; padding: 10px 0 0; float: none; text-align: left; background: none;
}
.sza-content .am-form div.element-title label { display: block; font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; }
.sza-content .am-form div.element-title .comment,
.sza-content .am-form div.element-title .comment strong,
.sza-content .am-form div.element-title .comment b { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--muted); font-weight: 400; }
.sza-content .am-form span.required { color: var(--bad); font-weight: 600; }
.sza-content .am-form div.element,
.sza-content .am-form div.row.no-label .element,
.sza-content .am-form div.row.row-wide .element { margin: 0; padding: 0; float: none; width: auto; min-width: 0; font-size: 14px; color: var(--text); }
.sza-content .am-form div.element p, .sza-content .am-form div.element .comment { color: var(--muted); font-size: 13px; }
.sza-content .am-form div.reqnote { padding: 8px 0 0; font-size: 12.5px; color: var(--faint); background: none; border: 0; }

.sza-content .am-form input[type="text"],
.sza-content .am-form input[type="password"],
.sza-content .am-form input[type="email"],
.sza-content .am-form input[type="url"],
.sza-content .am-form input[type="tel"],
.sza-content .am-form input[type="number"],
.sza-content .am-form select,
.sza-content .am-form textarea,
.sza-content .custom_redirect input[type="text"] {
  display: block; width: 100%; max-width: 520px; height: 44px; margin: 0;
  padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: #fff; color: var(--text); font: inherit; font-size: 14.5px; line-height: 42px;
  box-shadow: var(--shadow-sm); -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sza-content .am-form input.el-short { width: auto; max-width: 160px; display: inline-block; }
/* Coupon code: compact, code-styled field */
.sza-content .am-form input[name="coupon"], .sza-content .am-signup .am-form input[name="coupon"] {
  width: 100%; max-width: 240px; height: 40px; line-height: 38px; padding: 0 12px;
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.sza-content .am-form input[name="coupon"]::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 400; }
.sza-content .am-form input.el-wide, .sza-content .custom_redirect input.el-wide { max-width: none; }
.sza-content .am-form textarea { height: auto; min-height: 132px; padding: 12px 14px; line-height: 1.5; resize: vertical; max-width: none; }
.sza-content .am-form select {
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6474' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.sza-content .am-form input::placeholder, .sza-content .am-form textarea::placeholder { color: var(--faint); }
.sza-content .am-form input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):focus,
.sza-content .am-form select:focus, .sza-content .am-form textarea:focus,
.sza-content .custom_redirect input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(10, 37, 220, 0.12);
}
/* Radios / checkboxes: no square glow on click; only a ring for keyboard focus */
.sza-content .am-form input[type="radio"]:focus, .sza-content .am-form input[type="checkbox"]:focus { outline: none; box-shadow: none; }
.sza-content .am-form input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
.sza-content .am-form input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sza-content .am-form input[type="submit"]:focus, .sza-content .am-form input[type="button"]:focus { outline: none; }
.sza-content .am-form input[type="submit"]:focus-visible, .sza-content .am-form input[type="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sza-content .am-form input.error, .sza-content .am-form textarea.error, .sza-content .am-form select.error { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.10); }
.sza-content .am-form input.valid, .sza-content .am-signup-form input.valid { background-image: none; border-color: var(--good-line); }
.sza-content .am-form span.error { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 500; color: var(--bad); }
.sza-content .am-form input[type="radio"], .sza-content .am-form input[type="checkbox"] {
  width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: 0 0 auto; cursor: pointer;
}
/* Radio / checkbox option lists (products, payment methods, payout type…) */
.sza-content .am-form div.element.group { display: grid; gap: 8px; text-transform: none; }
.sza-content .am-form div.element label,
.sza-content .am-form .advradio-options label {
  position: relative; display: block; width: 100%; max-width: 620px;
  padding: 12px 14px 12px 42px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.45; cursor: pointer; text-transform: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.sza-content .am-form div.element label > input[type="radio"],
.sza-content .am-form div.element label > input[type="checkbox"] { position: absolute; left: 14px; top: 14px; }
.sza-content .am-form div.element label:hover { border-color: var(--line-strong); background: var(--bg-2); }
.sza-content .am-form div.element label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.sza-content .am-form div.element label b, .sza-content .am-form div.element label strong { font-weight: 600; }
.sza-content .am-form div.element label br { display: none; }
.sza-content .am-form div.element label .small, .sza-content .am-form .am-paysystem-desc { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; font-weight: 400; font-style: normal; }
.sza-content .am-form .am-paysystem-title { font-weight: 600; }
/* Single plan available: show it as plain text instead of a selectable card */
.sza-content .am-form [id^="row-product_id"] div.element:not(:has(label ~ label)) > label {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; padding: 10px 0 0; max-width: none;
  border: 0; border-radius: 0; background: none; box-shadow: none; cursor: default;
}
.sza-content .am-form [id^="row-product_id"] div.element:not(:has(label ~ label)) > label:hover { border: 0; background: none; }
.sza-content .am-form [id^="row-product_id"] div.element:not(:has(label ~ label)) > label > input[type="radio"],
.sza-content .am-form [id^="row-product_id"] div.element:not(:has(label ~ label)) > label > input[type="checkbox"] { position: static; align-self: center; margin-right: 4px; }
.sza-content .am-form [id^="row-product_id"] div.element:not(:has(label ~ label)) > label > input[type="radio"]:checked { display: none; }
.sza-content .am-form [id^="row-product_id"] div.element:not(:has(label ~ label)) > label .am-product-title { font-weight: 600; font-size: 15px; }
.sza-content .am-form [id^="row-product_id"] div.element:not(:has(label ~ label)) > label .am-product-terms { color: var(--muted); font-weight: 400; }
.sza-content .am-form [id^="row-product_id"] div.element:not(:has(label ~ label)) > label .am-product-desc:empty { display: none; }
.sza-content .am-form [id^="row-product_id"] div.element:not(:has(label ~ label)) > label .am-product-desc { flex: 1 0 100%; color: var(--muted); font-weight: 400; font-size: 13px; }
.sza-content .am-form input.am-product-qty { display: inline-block; width: 64px; height: 34px; margin: 6px 0 0; padding: 0 10px; line-height: 32px; font-size: 13px; }
.sza-content .am-form .am-row-terms .am-terms-text, .sza-content .am-form .agreement { font-size: 13px; color: var(--muted); }
/* Phone number brick (country-code dropdown + number).
   The brick injects inline styles + !important rules, so these need !important too.
   QuickForm2 suffixes the row id (row-phone_group-0), hence the prefix selector. */
.sza-content .am-form [id^="row-phone_group"] .element.group {
  display: flex !important; flex-wrap: nowrap; align-items: stretch !important; gap: 8px !important;
  max-width: 520px;
}
.sza-content .am-signup .am-form [id^="row-phone_group"] .element.group { max-width: 640px; }
.sza-content .am-form [id^="row-phone_group"] .element.group > * { display: block !important; }
.sza-content .am-form [id^="row-phone_group"] .element.group > span.error { flex: 1 0 100%; }
.sza-content .am-form [id^="row-phone_group"] .element.group .phone-country-code-wrapper,
.sza-content .am-form [id^="row-phone_group"] .element.group .phone-country-dropdown { width: 132px !important; flex: 0 0 132px; position: relative; }
.sza-content .am-form [id^="row-phone_group"] .element.group select.phone-country-code-select,
.sza-content .am-form [id^="row-phone_group"] .element.group select[name="phone_group[phone_country_code]"] {
  width: 132px !important; height: 44px !important; margin: 0 !important; padding: 0 34px 0 14px !important;
  border: 1px solid var(--line-strong) !important; border-radius: 10px !important; background-color: #fff;
  font: inherit !important; font-size: 14.5px !important; line-height: 42px !important; color: var(--text);
  box-shadow: var(--shadow-sm);
}
.sza-content .am-form [id^="row-phone_group"] .element.group .phone-country-selected {
  height: 44px !important; padding: 0 12px 0 14px !important; margin: 0 !important;
  border: 1px solid var(--line-strong) !important; border-radius: 10px !important; background: #fff !important;
  font: inherit !important; font-size: 14.5px !important; font-weight: 500; color: var(--text);
  box-shadow: var(--shadow-sm); transition: border-color 0.15s ease, background 0.15s ease;
}
.sza-content .am-form [id^="row-phone_group"] .element.group .phone-country-selected:hover { border-color: #b3c3e6 !important; background: var(--bg-2) !important; }
.sza-content .am-form [id^="row-phone_group"] .element.group .phone-country-selected > span:last-child { color: var(--muted) !important; font-size: 9px !important; margin-left: 8px !important; }
.sza-content .am-form [id^="row-phone_group"] .element.group .phone-country-options {
  top: calc(100% + 6px) !important; left: 0 !important; right: auto !important; width: 320px; max-width: 80vw;
  max-height: 300px !important; padding: 6px !important;
  border: 1px solid var(--line) !important; border-radius: 12px !important; background: #fff !important;
  box-shadow: var(--shadow-md) !important; z-index: 70 !important;
}
.sza-content .am-form [id^="row-phone_group"] .element.group .phone-country-search {
  height: 38px; margin: 0 0 6px !important; padding: 0 12px !important;
  border: 1px solid var(--line) !important; border-radius: 8px !important; background: var(--bg-2);
  font: inherit !important; font-size: 14px !important; color: var(--text);
}
.sza-content .am-form [id^="row-phone_group"] .element.group .phone-country-search:focus { outline: none; border-color: var(--accent) !important; background: #fff; }
.sza-content .am-form [id^="row-phone_group"] .element.group .phone-country-option {
  padding: 8px 10px !important; border: 0 !important; border-radius: 8px;
  font: inherit !important; font-size: 13.5px !important; line-height: 1.4 !important; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sza-content .am-form [id^="row-phone_group"] .element.group .phone-country-option:hover { background: var(--bg-2) !important; }
.sza-content .am-form [id^="row-phone_group"] .element.group input[name="phone_group[phone]"],
.sza-content .am-form [id^="row-phone_group"] .element.group input[name^="phone_group"][name$="[phone]"] {
  flex: 1 1 auto; width: auto !important; min-width: 0; max-width: none;
  height: 44px !important; margin: 0 !important; padding: 0 14px !important;
  border: 1px solid var(--line-strong) !important; border-radius: 10px !important; background: #fff;
  font: inherit !important; font-size: 14.5px !important; line-height: 42px !important; color: var(--text);
  box-shadow: var(--shadow-sm); letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.sza-content .am-form [id^="row-phone_group"] .element.group input[name="phone_group[phone]"]:focus {
  outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(10, 37, 220, 0.12);
}
.sza-content .am-form [id^="row-phone_group"] .element.group input[name="phone_group[phone]"].error { border-color: #ef4444 !important; }
/* select2 variant (if the plugin is present) */
.sza-content .am-form [id^="row-phone_group"] .element.group .select2-container { width: 132px !important; flex: 0 0 132px; }
.sza-content .am-form [id^="row-phone_group"] .element.group .select2-container--default .select2-selection--single {
  height: 44px !important; border: 1px solid var(--line-strong) !important; border-radius: 10px !important; background: #fff;
}
.sza-content .am-form [id^="row-phone_group"] .element.group .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 42px !important; padding-left: 14px !important; font-size: 14.5px !important; color: var(--text); }
.sza-content .am-form [id^="row-phone_group"] .element.group .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px !important; right: 10px !important; }

/* reCAPTCHA ("Anti Spam") — stack the widget under its title */
.sza-content .am-form div.row:has(.g-recaptcha),
.sza-content .am-signup .am-form div.row:has(.g-recaptcha) { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sza-content .am-form div.row:has(.g-recaptcha) .element-title { padding-top: 0; }
.sza-content .am-form div.row:has(.g-recaptcha) .element.group { display: block; }
.sza-content .am-form .g-recaptcha { display: block; overflow: hidden; }
.sza-content .am-form .g-recaptcha > div { max-width: 100%; }
/* Submit row */
.sza-content .am-form div.row-buttons, .sza-content .am-form div.row:has(> .element > input[type="submit"]) { border-bottom: 0; padding-top: 20px; }
.sza-content .am-form div.row:has(> .element > input[type="submit"]) .element { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sza-content .am-form input[type="submit"] { height: 46px; padding: 0 24px; font-size: 15px; }
.sza-content .am-form div.element > a.link, .sza-content .am-form div.element > div > a.link { font-size: 13.5px; }
.sza-content .am-form .am-helpdesk-attachment-expand { display: inline-block; padding: 6px 0; font-size: 13.5px; color: var(--accent); }
/* Invoice / order summary (#invoice-summary brick, AJAX-refreshed) */
.sza-content #invoice-summary:empty { display: none; }
.sza-content .am-form form > #invoice-summary { margin: 18px 0 4px; }
.sza-content .am-invoice-summary {
  margin: 0; padding: 0; overflow: hidden;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 12px; box-shadow: none;
  font-size: 14px;
}
.sza-content .am-invoice-summary > div { padding: 0; }
.sza-content .am-invoice-summary-head {
  padding: 18px 22px 18px 30px !important; border-bottom: 1px solid var(--line); background: #fff;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text);
}
.sza-content .am-invoice-summary table.am-invoice-summary-items { width: 100%; border-collapse: collapse; margin: 0; }
.sza-content .am-invoice-summary td { padding: 12px 18px; vertical-align: top; color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--line); }
.sza-content .am-invoice-summary .am-invoice-summary-item td { background: #fff; }
.sza-content .am-invoice-summary .am-invoice-summary-item-title { font-weight: 500; line-height: 1.5; }
.sza-content .am-invoice-summary .am-invoice-summary-item-title b, .sza-content .am-invoice-summary .am-invoice-summary-item-title i { font-style: normal; font-weight: 400; color: var(--muted); font-size: 12.5px; }
.sza-content .am-invoice-summary .am-invoice-summary-item-title i[style] { color: var(--faint) !important; }
.sza-content .am-invoice-summary .am-invoice-summary-item-num {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-right: 6px; padding: 0 6px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; letter-spacing: 0;
}
.sza-content .am-invoice-summary .am-invoice-summary-item-qty { width: 1%; white-space: nowrap; color: var(--muted); }
.sza-content .am-invoice-summary .am-invoice-summary-price { text-align: right; width: 22%; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.sza-content .am-invoice-summary tr.am-invoice-summary-delimeter, .sza-content .am-invoice-summary tr.am-invoice-summary-delimeter td { display: none; }
.sza-content .am-invoice-summary .am-invoice-summary-row-subtotal td,
.sza-content .am-invoice-summary .am-invoice-summary-row-discount td,
.sza-content .am-invoice-summary .am-invoice-summary-row-shipping td,
.sza-content .am-invoice-summary .am-invoice-summary-row-tax td { padding: 8px 18px; font-size: 13.5px; color: var(--muted); border-bottom: 0; }
.sza-content .am-invoice-summary .am-invoice-summary-row-subtotal td:first-child { padding-top: 14px; }
.sza-content .am-invoice-summary .am-invoice-summary-row-subtotal .am-invoice-summary-price,
.sza-content .am-invoice-summary .am-invoice-summary-row-tax .am-invoice-summary-price,
.sza-content .am-invoice-summary .am-invoice-summary-row-shipping .am-invoice-summary-price { font-weight: 500; color: var(--text); }
.sza-content .am-invoice-summary .am-invoice-summary-row-discount .am-invoice-summary-price { color: var(--good); font-weight: 600; }
.sza-content .am-invoice-summary .am-invoice-summary-subtotal,
.sza-content .am-invoice-summary .am-invoice-summary-discount,
.sza-content .am-invoice-summary .am-invoice-summary-shipping,
.sza-content .am-invoice-summary .am-invoice-summary-tax,
.sza-content .am-invoice-summary .am-invoice-summary-total { text-align: right; font-size: inherit; }
.sza-content .am-invoice-summary .am-invoice-summary-row-total td { padding: 14px 18px 16px; border-bottom: 0; border-top: 1px solid var(--line-strong); font-size: 15px; }
.sza-content .am-invoice-summary .am-invoice-summary-row-total .am-invoice-summary-total strong { font-weight: 600; color: var(--muted); }
.sza-content .am-invoice-summary .am-invoice-summary-row-total .am-invoice-summary-price strong { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.sza-content .am-invoice-summary-terms {
  padding: 12px 18px; border-top: 1px solid var(--line); background: #fff;
  font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.sza-content .am-invoice-summary-terms strong { color: var(--text); font-weight: 600; }
/* Receipt table (thanks page) */
.sza-content .am-receipt { width: 100%; border-collapse: collapse; font-size: 14px; }
.sza-content .am-receipt td { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--text); background: none; }
.sza-content .am-receipt td.am-receipt-total { font-weight: 700; }
/* Signup */
.sza-content .am-signup { display: grid; gap: 18px; width: 100%; }
.sza-content .am-signup .am-form div.row { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); }
.sza-content .am-signup .am-form div.row.no-label, .sza-content .am-signup .am-form div.row.row-wide { grid-template-columns: minmax(0, 1fr); }
.sza-content .am-signup .am-form input[type="text"]:not([name="coupon"]), .sza-content .am-signup .am-form input[type="password"],
.sza-content .am-signup .am-form input[type="email"], .sza-content .am-signup .am-form select,
.sza-content .am-signup .am-form div.element label { max-width: 640px; }
.sza-content .am-signup-link, .sza-content .am-login-text { font-size: 14px; }

/* ---------- Helpdesk ---------- */
.sza-content .am-helpdesk { display: grid; gap: 14px; padding: 0; margin: 0; }
.sza-content .am-helpdesk-ticket { padding: 18px 20px; margin: 0; }
.sza-content .am-helpdesk-ticket-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 0; margin: 0; border: 0; background: none; }
.sza-content .am-helpdesk-ticket-info { font-size: 13.5px; color: var(--muted); padding: 0; margin: 0; }
.sza-content .am-helpdesk-ticket-info strong { color: var(--text); font-weight: 600; margin-right: 12px; }
.sza-content .am-helpdesk-ticket-status:empty { display: none; }
.sza-content .am-helpdesk-ticket-actions-conteiner { margin: 14px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; overflow: visible; }
.sza-content .am-helpdesk-ticket-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; background: none; border: 0; }
.sza-content .am-helpdesk-ticket-action { margin: 0; padding: 0; border: 0; background: none; float: none; }
.sza-content .am-helpdesk-ticket-action a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--text); font-size: 13.5px; font-weight: 600;
  text-decoration: none; box-shadow: var(--shadow-sm);
}
.sza-content .am-helpdesk-ticket-action a:hover { background: var(--bg-2); text-decoration: none; }
.sza-content .am-helpdesk-ticket-action-reply a { background: var(--accent); border-color: var(--accent); color: #fff; }
.sza-content .am-helpdesk-ticket-action-reply a:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.sza-content .am-helpdesk-ticket-action.am-helpdesk-action-active a { background: var(--text); border-color: var(--text); color: #fff; }
.sza-content .am-helpdesk-ticket-action-close a { color: var(--bad); }
.sza-content .am-helpdesk-ticket-action-fold-all { margin-left: auto; line-height: 1; font-size: 16px; }
.sza-content .am-helpdesk-ticket-action-fold-all a { width: 36px; padding: 0; justify-content: center; color: var(--muted); }
.sza-content .am-helpdesk-reply-panel { margin: 14px 0 0; padding: 0; border: 0; background: none; }
.sza-content .am-helpdesk-reply-panel-content .am-form div.row.no-label .element textarea { font-family: inherit; padding: 12px 14px; }
.sza-content .am-helpdesk-reply-panel:empty, .sza-content .am-helpdesk-reply-panel-content:empty { display: none; }
.sza-content .am-helpdesk-reply-panel-content .am-form form { padding: 0; border: 0; box-shadow: none; background: none; }
.sza-content .am-helpdesk-reply-panel-content .am-form div.row { padding: 10px 0; border: 0; }
.sza-content .am-helpdesk-reply-panel-content .am-form div.row.no-label .element textarea,
.sza-content .am-helpdesk-reply-panel-content .am-form textarea { width: 100%; max-width: none; min-height: 140px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; }
.sza-content .am-helpdesk-reply-panel-content .am-form textarea:focus { border-color: var(--accent); }
.sza-content .am-helpdesk-message { padding: 0; margin: 0; overflow: hidden; }
.sza-content .am-helpdesk-message.am-helpdesk-message-inbound { border-left: 3px solid var(--accent); }
.sza-content .am-helpdesk-message.am-helpdesk-message-outbound { border-left: 3px solid var(--good); }
.sza-content .am-helpdesk-message.am-helpdesk-message-comment { border-left: 3px solid var(--warn); }
.sza-content .am-helpdesk-message-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px; margin: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--bg-2);
  font-size: 13px; color: var(--muted);
}
.sza-content .am-helpdesk-message-outbound.am-helpdesk-message-closed .am-helpdesk-message-header,
.sza-content .am-helpdesk-message-closed .am-helpdesk-message-header { background: var(--bg-2); border-bottom: 0; }
.sza-content .am-helpdesk-message-author { font-weight: 600; color: var(--text); }
.sza-content .am-helpdesk-message-author-avatar { display: none; }
.sza-content .am-helpdesk-message-date { color: var(--muted); }
.sza-content .am-helpdesk-message-preview-content { color: var(--faint); }
.sza-content .am-helpdesk-message-action-fold { order: 9; margin-left: auto; float: none; padding: 0; line-height: 1; font-size: 16px; }
.sza-content .am-helpdesk-message-action-fold a { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--muted); text-decoration: none; }
.sza-content .am-helpdesk-message-action-fold a:hover { background: #fff; color: var(--text); }
.sza-content .am-helpdesk-message-has-attachments img { height: 14px; opacity: 0.6; }
.sza-content .am-helpdesk-message-content { padding: 16px 18px; margin: 0; border: 0; background: #fff; }
.sza-content .am-helpdesk-message-content pre {
  margin: 0; padding: 0; border: 0; background: none;
  font-family: inherit; font-size: 14.5px; line-height: 1.6; color: var(--text); white-space: pre-wrap; word-wrap: break-word;
}
.sza-content .am-helpdesk ul.am-helpdesk-message-attachments { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--line); list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.sza-content .am-helpdesk ul.am-helpdesk-message-attachments li.am-helpdesk-message-attachments-item {
  margin: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); font-size: 13px; color: var(--muted);
}
.sza-content .am-helpdesk ul.am-helpdesk-message-attachments li.am-helpdesk-message-attachments-item:before { display: none; }
.sza-content .am-helpdesk-message-actions { display: flex; gap: 8px; padding: 0 18px 14px; margin: 0; border: 0; background: none; }
.sza-content .am-helpdesk-message-actions:empty { display: none; }
.sza-content .am-helpdesk-message-action { margin: 0; padding: 0; border: 0; background: none; }
.sza-content .am-helpdesk-message-action a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: #fff; color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; }
.sza-content .am-helpdesk-message-action a:hover { background: var(--bg-2); }
.sza-content .am-helpdesk-message-action.am-helpdesk-action-active a { background: var(--text); border-color: var(--text); color: #fff; }
.sza-content .am-helpdesk-message .am-helpdesk-reply-panel { padding: 0 18px 18px; }
.sza-content .am-helpdesk-form #row-attachments-0 { padding-top: 6px; }
.sza-content #am-helpdesk-faq-q-result { margin-top: 10px; }
.sza-content .am-helpdesk-faq-list { padding: 4px 20px; }
.sza-content .am-helpdesk-faq-list-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
.sza-content .am-helpdesk-faq-list-item:last-child { border-bottom: 0; }

/* ---------- Affiliate ---------- */
.sza-content .aff-panel-wrapper, .sza-content .aff-stats-wrapper, .sza-content .payout-info-wrapper, .sza-content .payout-history-wrapper { display: grid; gap: 18px; }
.sza-content .aff-general-link-card { padding: 20px 22px; }
.sza-content .aff-general-link-card h2 { font-size: 15px; margin: 0 0 12px; }
.sza-content .aff-link-display {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 10px 10px 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-2);
  font-family: var(--mono); font-size: 13.5px; color: var(--text); word-break: break-all;
}
.sza-content .aff-link-display .aff-link-copy-btn { margin-left: auto; font-family: var(--sans); }
.sza-content .am-aff-banner-preview { padding: 20px 22px; }
.sza-content .am-aff-banner-preview > h2 { font-size: 15px; margin: 0 0 12px; }
/* Section labels emitted by the aff blocks envelope ("Banners and Links", "Marketing Materials") */
.sza-content .aff-panel-wrapper > h2 { margin: 6px 0 -6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sza-content .aff-panel-wrapper > h2:first-child { margin-top: 0; }
.sza-content .custom_redirect > div:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 !important; }
.sza-content .custom_redirect > div:first-child > div:first-child { flex: 1 0 100%; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.sza-content .custom_redirect > div:first-child > div { display: block !important; padding: 0 !important; }
.sza-content .custom_redirect > div:first-child > div.el-wide { flex: 1 1 280px; }
.sza-content .custom_redirect input[type="text"] { max-width: none; }
.sza-content .custom_redirect #custom_redirect_div { margin-top: 14px; padding: 0 !important; display: grid; gap: 6px; }
.sza-content .custom_redirect #custom_redirect_div label { font-size: 13.5px; font-weight: 600; }
.sza-content .aff-category-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sza-content .aff-category-nav a, .sza-content .aff-category-nav h2 {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; margin: 0; border-radius: 999px;
  border: 1px solid var(--line-strong); background: #fff; color: var(--muted); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-sm);
}
.sza-content .aff-category-nav a:hover { color: var(--text); background: var(--bg-2); }
.sza-content .aff-category-nav h2 { background: var(--text); border-color: var(--text); color: #fff; }
.sza-content .aff-banner-card { padding: 20px 22px; }
.sza-content .aff-banner-card h2 { font-size: 15px; margin: 0 0 14px; }
.sza-content .aff-banner-preview-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.sza-content .aff-banner-preview-box { display: grid; place-items: center; min-height: 120px; padding: 16px; border: 1px dashed var(--line-strong); border-radius: 12px; background: var(--bg-2); overflow: auto; }
.sza-content .aff-banner-info dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: 13.5px; }
.sza-content .aff-banner-info dt { color: var(--faint); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 2px; }
.sza-content .aff-banner-info dd { margin: 0; color: var(--text); word-break: break-all; }
.sza-content .aff-banner-info a { color: var(--accent); }
.sza-content .aff-source-code-toggle { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.sza-content .aff-source-code-textarea {
  display: block; width: 100%; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--bg-2); font-family: var(--mono); font-size: 12.5px; color: var(--text); resize: vertical;
}
.sza-content ul.am-aff-mm { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sza-content .am-aff-mm-item { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 14px; }
.sza-content .am-aff-mm-item a { font-weight: 600; color: var(--accent); }
.sza-content .am-aff-mm-item-desc { display: block; margin-top: 2px; font-style: normal; font-size: 13px; color: var(--muted); }
.sza-content .aff-stats-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; color: var(--muted); }
.sza-content .aff-stats-header p { margin: 0; }
.sza-content .aff-stats-header strong { color: var(--text); font-weight: 600; }
.sza-content .aff-stats-back a { color: var(--accent); font-weight: 600; }
.sza-content .am-aff-stats-export { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--faint); }
.sza-content .am-aff-stats-export a { color: var(--text); font-weight: 600; }
.sza-content .am-aff-stats-export a:hover { text-decoration: none; }
.sza-content .am-aff-stats-export a svg { width: 15px; height: 15px; color: var(--muted); }

/* Stats: KPI tiles, chart card, breakdown table */
.sza-content .aff-stats-kpis .sza-stat .v a, .sza-content .aff-payout-kpis .sza-stat .d a { color: var(--accent); font-weight: 600; }
.sza-content .aff-stats-chart .sza-card-body { padding: 18px 20px 12px; }
.sza-content .aff-stats-chart div[id^="report-"] { width: 100% !important; min-height: 240px; }
.sza-content .aff-stats-chart .am-report { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
/* Morris.js chart chrome */
.sza-content .aff-stats-chart svg { font-family: var(--sans) !important; }
.sza-content .aff-stats-chart svg text { fill: var(--faint) !important; font-size: 11.5px !important; font-family: var(--sans) !important; }
.sza-content .aff-stats-chart svg path[stroke="#aaa"], .sza-content .aff-stats-chart svg path[stroke="#aaaaaa"] { stroke: var(--line) !important; }
body.sza-body .morris-hover.morris-default-style {
  border-radius: 10px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-md);
  padding: 8px 12px; font-family: var(--sans); font-size: 12.5px; color: var(--muted); text-align: left;
}
body.sza-body .morris-hover.morris-default-style .morris-hover-row-label { font-weight: 600; color: var(--text); margin-bottom: 4px; }
body.sza-body .morris-hover.morris-default-style .morris-hover-point { font-weight: 600; }
.sza-content .aff-stats-card .sza-card-head { padding: 14px 20px; }
.sza-content .aff-stats-card table.grid tr:first-child th { border-top: 0; }
.sza-content .aff-stats-card td a, .sza-content .aff-stats-card td a.local { color: var(--accent); font-weight: 600; }
.sza-content .aff-stats-card td a:hover { text-decoration: underline; }
.sza-content .aff-stats-card tr.aff-details td { padding: 14px 16px 18px; }
.sza-content .aff-stats-card .aff-details-close { float: right; font-size: 13px; }
.sza-content .aff-stats-card .aff-details .content table { width: 100%; font-size: 13px; }

/* Payout methods: form card + explainer */
.sza-content .aff-payout-grid { align-items: start; }
.sza-content .aff-payout-form-card .am-form form { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.sza-content .aff-payout-form-card .am-form form > div.row:first-child { padding-top: 4px; }
.sza-content .aff-payout-form-card .am-form div.row { grid-template-columns: minmax(160px, 200px) minmax(0, 1fr); }
.sza-content .aff-payout-form-card .am-form select, .sza-content .aff-payout-form-card .am-form input[type="text"], .sza-content .aff-payout-form-card .am-form textarea { max-width: none; }
.sza-content .aff-payout-side { display: grid; gap: 18px; }
.sza-content .aff-payout-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.sza-content .aff-payout-facts li { display: flex; gap: 14px; align-items: flex-start; }
.sza-content .aff-payout-facts .ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); border: 1px solid #c7d6ff;
}
.sza-content .aff-payout-facts .ic svg { width: 18px; height: 18px; }
.sza-content .aff-payout-facts b { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
.sza-content .aff-payout-facts p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.sza-content .aff-payout-facts p strong { color: var(--text); font-weight: 600; }
.sza-content .aff-payout-facts p a { color: var(--accent); font-weight: 600; }

/* Payout history */
.sza-content .payout-table-card .sza-card-head { padding: 14px 20px; }
.sza-content .payout-table-card .grid-container { border: 0; box-shadow: none; border-radius: 0; }
.sza-content .payout-table-card tbody td.sza-dim { color: var(--muted); }
/* Chart emitted by aMember reports (Flot / Google charts wrapper) */
.sza-content .am-report, .sza-content .am-graph, .sza-content div[id^="am-chart"], .sza-content .report-graph {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-sm);
}

/* ---------- Usage page (stockzen.io/daily_usage) ---------- */
.sza-usage-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sza-usage-table th {
  padding: 12px 16px; text-align: left; white-space: nowrap; background: var(--bg-2); color: var(--muted);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--line);
}
.sza-usage-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.sza-usage-table tbody tr:last-child td { border-bottom: 0; }
.sza-usage-table .c { text-align: center; font-variant-numeric: tabular-nums; }
.sza-usage-table .r { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.sza-usage-table .svc { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.sza-usage-table .svc img { height: 20px; width: auto; }
.sza-usage-table .svc img[src*="magnific"] { height: 15px; }
.sza-usage-table tr.locked .svc, .sza-usage-table tr.locked .c, .sza-usage-table tr.locked .r { color: var(--faint); }
.sza-usage-table tr.locked .svc img { filter: grayscale(1); opacity: 0.5; }
.sza-meter { position: relative; height: 8px; min-width: 160px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.sza-meter > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--accent); transition: width 0.4s ease; }
.sza-meter.warn > span { background: var(--warn); }
.sza-meter.full > span { background: var(--bad); }
.sza-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sza-stat { padding: 16px 18px; }
.sza-stat .k { font-size: 12.5px; font-weight: 600; color: var(--faint); letter-spacing: 0.04em; text-transform: uppercase; }
.sza-stat .v { margin-top: 6px; font-size: 26px; font-weight: 600; letter-spacing: -0.03em; }
.sza-stat .v small { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.sza-stat .d { margin-top: 4px; font-size: 13px; color: var(--muted); }
.sza-card-foot { padding: 12px 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .sza-col-7, .sza-col-5, .sza-col-6, .sza-col-4 { grid-column: span 12; }
}
@media (max-width: 760px) {
  .sza-content .am-form div.row, .sza-content .am-signup .am-form div.row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 0; }
  .sza-content .am-form div.element-title { padding-top: 0; }
  .sza-content .am-form form { padding: 4px 16px 18px; }
  .sza-content .am-form input[type="text"], .sza-content .am-form input[type="password"], .sza-content .am-form input[type="email"],
  .sza-content .am-form select, .sza-content .am-form textarea { max-width: none; }
  .sza-content .am-form input[type="text"][name="coupon"] { max-width: 240px; }
  .sza-content .am-form input[type="submit"] { width: 100%; }
  .sza-content .aff-banner-preview-container { grid-template-columns: minmax(0, 1fr); }
  .sza-content table.grid th, .sza-content table.grid td,
  .sza-content .payment-table-card th, .sza-content .payment-table-card td,
  .sza-content .payout-table-card th, .sza-content .payout-table-card td,
  .sza-content .aff-stats-card th, .sza-content .aff-stats-card td { padding: 11px 12px; font-size: 13.5px; white-space: nowrap; }
  .sza-content .payment-table-card, .sza-content .payout-table-card, .sza-content .aff-stats-card .grid-container { overflow-x: auto; }
  .sza-stats { grid-template-columns: minmax(0, 1fr); }
  .sza-content .am-aff-stats-export .sza-btn { width: auto; }
  .sza-usage-wrap { overflow-x: auto; }
  .sza-usage-table th, .sza-usage-table td { padding: 11px 12px; white-space: nowrap; }
  .sza-meter { min-width: 120px; }
}
/* 1081-1160px: the extra API link needs ~30-80px. Only trim the gaps (and link padding
   below 1110px) so the header keeps its normal look — name, fonts and buttons unchanged. */
@media (max-width: 1160px) {
  .sza-nav-inner { gap: 14px; }
  .sza-links { margin-left: 0; }
}
@media (max-width: 1110px) {
  .sza-links a, .sza-links button { padding: 0 8px; }
}
/* Small laptops / landscape tablets: the full link row + plan button + user chip
   need ~1040px, so tighten spacing and drop the user name before the burger kicks in. */
@media (max-width: 1080px) {
  .sza-nav-inner { gap: 14px; }
  .sza-links { margin-left: 0; }
  .sza-links a, .sza-links button { padding: 0 9px; font-size: 13.5px; }
  .sza-btn-plan { padding: 0 11px; font-size: 13px; }
  .sza-user .uname, .sza-user svg.chev { display: none; }
  .sza-user > button { padding: 0 3px; }
}
@media (max-width: 980px) {
  /* Seven links + Affiliate: tighten spacing and collapse the plan button to its icon. */
  .sza-links a, .sza-links button { padding: 0 7px; gap: 4px; }
  .sza-btn-plan:not(.sza-btn-login) { padding: 0 9px; }
  .sza-btn-plan .lbl { display: none; }
}
@media (max-width: 900px) {
  .sza-links { display: none; }
  .sza-burger { display: inline-flex; }
  .sza-user .uname, .sza-user svg.chev { display: none; }
  .sza-user > button { padding: 0 3px; }
  .sza-btn-plan:not(.sza-btn-login) { display: none; }   /* guest "Log in" button stays */
}
@media (max-width: 720px) {
  .sza-main { padding: 20px 0 44px; }
  .sza-wrap { width: calc(100% - 32px); }
  .sza-nav-inner { gap: 12px; }
  .sza-brand img { height: 26px; }
  .sza-guest-link { display: none; }   /* guest header: logo + Status + "Log in" only on phones */
  .sza-guest-link.sza-guest-status { display: inline; }
  .sza-dl-body { padding: 20px 18px 18px; }
  .sza-dl-form { flex-direction: column; }
  .sza-btn { width: 100%; }
  .sza-example a { max-width: 100%; }
  .sza-ql { grid-template-columns: 1fr; }
  .sza-aff-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .sza-aff-tiers b { font-size: 17px; }
  .sza-foot-inner { justify-content: center; text-align: center; padding: 16px 0 72px; }
  .sza-plan { grid-template-columns: 40px minmax(0, 1fr); }
  .sza-plan .sza-badge { grid-column: 2; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  body.sza-body * { transition: none !important; animation: none !important; }
}