/* Century app look (shared with the Rollouts admin). Design preview: only applies when <html> has class "cx".
   Tokens follow configurator/kitflow.css in the rollouts-configurator repo. */
.cx {
  --cx-ink: #1c1e1a; --cx-black: #111; --cx-muted: #57534e; --cx-soft: #78716c; --cx-faint: #a8a29e;
  --cx-line: #d6d3d1; --cx-hair: #e7e5e4; --cx-page: #f5f5f4; --cx-tint: #fafaf9; --cx-green: #8cc63e;
  --cx-bad: #b91c1c; --cx-width: 1216px;
}
.cx body { background: var(--cx-page); }

/* ---- header: black, thin green top line, centered with the content ---- */
.cx .ph { background: var(--cx-black); border-top: 3px solid var(--cx-green); padding: 0 32px; }
.cx .ph-bar, .cx .ph-tabs { max-width: var(--cx-width); margin: 0 auto; padding-left: 0; padding-right: 0; }
.cx .ph-bar { height: 62px; }
.cx .ph-tabs { border-top: 0; height: 48px; gap: 28px; }
/* The Webflow text is typed in capitals; show the name in title case (final fix: retype it in Webflow). */
.cx .ph-label { background: transparent; color: #fff; padding: 0; font-size: 0; letter-spacing: 0; }
.cx .ph-label::before { content: "Customer Portal"; font-size: 14px; font-weight: 600; }
.cx .ph-divider { background: rgba(255, 255, 255, 0.25); }
.cx .ph-tab { padding: 0; color: #c9cec5; font-weight: 600; box-shadow: none; border-bottom: 3px solid transparent; }
.cx .ph-tab:hover { color: #fff; }
.cx .ph-tab.is-active, .cx .ph-tab.w--current { color: #fff; box-shadow: none; border-bottom-color: var(--cx-green); }
.cx .ph-account-btn { height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.4); gap: 8px; }
.cx .ph-avatar { display: none; }
.cx .ph-panel { border-radius: 0; }

/* ---- page: one white panel, centered ---- */
.cx main.portal-shell {
  max-width: var(--cx-width); margin: 32px auto 64px; padding: 32px;
  background: #fff; border: 1px solid var(--cx-hair); box-shadow: none; box-sizing: border-box; min-height: 0;
}
@media (max-width: 1280px) { .cx main.portal-shell { margin-left: 32px; margin-right: 32px; } }
@media (max-width: 767px) { .cx main.portal-shell { margin: 16px; padding: 20px 16px; } .cx .ph { padding: 0 16px; } }
.cx .portal-icon-title-row { margin-bottom: 24px; gap: 10px; align-items: center; }
.cx .portal-icon-title-row h1, .cx main.portal-shell h1 { font-family: Lora, Georgia, serif; font-size: 26px; font-weight: 700; line-height: 1.2; margin: 0; }
.cx .portal-page-icon { width: 22px; height: 22px; }
.cx .pr-page-intro.icon-aligned-intro { margin: 8px 0 0; }

/* ---- Home cards: flat, sentence-case label ---- */
.cx .portal-grid { gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991px) { .cx .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cx .portal-grid { grid-template-columns: 1fr; } }
.cx .home-soft-shadow { box-shadow: none; }
.cx .portal-card { box-shadow: none; border: 1px solid var(--cx-line); padding: 20px; transition: border-color .15s; }
.cx .portal-card:hover { border-color: var(--cx-ink); }
.cx .portal-kicker { background: transparent; color: var(--cx-muted); padding: 0; border-radius: 0; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: lowercase; }
.cx .portal-kicker::first-letter { text-transform: uppercase; }
.cx .portal-card h2, .cx .portal-card h3 { font-size: 20px; font-weight: 700; }
.cx .portal-copy { color: var(--cx-muted); font-size: 14px; line-height: 1.5; }

/* ---- Members Manager in the app look ---- */
.cx .ma { gap: 20px; font-size: 15px; }
.cx .ma-search, .cx .ma-input { height: 48px; font-size: 15px; border-color: var(--cx-faint); padding: 0 12px; }
.cx .ma-btn { height: 48px; padding: 0 24px; font-size: 15px; border-color: #bfc1ba; }
.cx .ma-btn-primary { background: var(--cx-black); border-color: var(--cx-black); color: #fff; }
.cx .ma-btn-primary:hover { background: #2b2b2b; }
.cx .ma-btn-danger { background: var(--cx-bad); border-color: var(--cx-bad); }
.cx .ma-btn-danger-outline { border-color: var(--cx-bad); color: var(--cx-bad); }
.cx .ma-tabs { gap: 8px; }
.cx .ma-tab { height: 40px; padding: 0 14px; border-color: var(--cx-line); background: #fff; font-weight: 600; color: var(--cx-ink); }
.cx .ma-tab.is-on { background: #fff; color: var(--cx-ink); border-color: var(--cx-black); box-shadow: inset 0 0 0 1px var(--cx-black); }
.cx .ma-tab-count, .cx .ma-tab.is-on .ma-tab-count { background: transparent; color: var(--cx-muted); padding: 0; font-size: 14px; font-weight: 400; }
.cx .ma-count { font-size: 14px; color: var(--cx-muted); }
.cx .ma-table-wrap { border: 0; }
.cx .ma-table { font-size: 14px; }
.cx .ma-table th { background: transparent; font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--cx-ink); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--cx-line); }
.cx .ma-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--cx-hair); }
.cx .ma-row:hover { background: var(--cx-tint); }
.cx .ma-badge { font-size: 12px; padding: 2px 7px; border: 1px solid; }
.cx .ma-badge-pending { background: #fef3c7; color: #78350f; border-color: #f2c94c; }
.cx .ma-badge-approved { background: #eef7e2; color: #3f6212; border-color: #b9d98f; }
.cx .ma-badge-unverified, .cx .ma-badge-archived, .cx .ma-badge-unknown { background: var(--cx-page); color: var(--cx-muted); border-color: var(--cx-line); }
.cx .ma-badge-suspended, .cx .ma-badge-denied, .cx .ma-badge-revoked { background: #fdecec; color: var(--cx-bad); border-color: #f2b8b5; }
.cx .ma-badge-level { background: #fff; border-color: var(--cx-line); }
.cx .ma-card { border-color: var(--cx-hair); padding: 24px; }
.cx .ma-h2 { font-size: 20px; font-weight: 700; }
.cx .ma-label, .cx .ma-dl dt { color: var(--cx-muted); }
.cx .ma-msg { border-color: var(--cx-hair); }

/* Shared primary button used on Webflow-built pages (Photos & Graphics, Product Data Table) */
.cx .portal-cta-primary { background: #111 !important; border-color: #111 !important; color: #fff !important; }
.cx .portal-cta-primary:hover { background: #2b2b2b !important; }