/* ==========================================================================
   SmartBite Partner Portal — SaaS-style sidebar layout
   Loaded after sbpr-public.css: reuses --sbpr-* brand variables, .sbpr-btn,
   .sbpr-badge-*, .sbpr-form, .sbpr-alert from that file.
   ========================================================================== */

.sbpr-portal {
	display: flex;
	min-height: 100vh;
	background: var(--sbpr-bg);
	font-size: 15px;
	color: var(--sbpr-ink);
}
.sbpr-portal * { box-sizing: border-box; }

/* --------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------- */
.sbpr-sidebar {
	width: 240px;
	flex-shrink: 0;
	background: #fff;
	border-right: 1px solid var(--sbpr-border);
	display: flex;
	flex-direction: column;
	padding: 18px 14px;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}
.sbpr-sidebar-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 6px 16px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--sbpr-border);
}
.sbpr-sidebar-brand img { height: 28px; width: auto; }

.sbpr-sidebar-partner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 8px;
	margin-bottom: 12px;
	background: var(--sbpr-green-light);
	border-radius: 10px;
}
.sbpr-sidebar-partner .sbpr-avatar {
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--sbpr-green); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; flex-shrink: 0;
}
.sbpr-sidebar-partner-name { font-weight: 700; font-size: 13px; line-height: 1.3; }
.sbpr-sidebar-partner-role { font-size: 11px; color: var(--sbpr-muted); }

.sbpr-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sbpr-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 10px;
	border-radius: 8px;
	color: var(--sbpr-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}
.sbpr-nav-item svg { flex-shrink: 0; color: var(--sbpr-muted); }
.sbpr-nav-item:hover { background: var(--sbpr-green-light); }
.sbpr-nav-item.is-active { background: var(--sbpr-green); color: #fff; }
.sbpr-nav-item.is-active svg { color: #fff; }

/* Sits directly below My Profile with its own separator line, rather
   than being pushed to the bottom of a 100vh column where it can end
   up below the fold and go unnoticed. */
.sbpr-sidebar-logout {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	margin-top: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--sbpr-border);
	color: var(--sbpr-orange-dark);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}
.sbpr-sidebar-logout:hover { background: #fdf1e6; border-radius: 8px; }

/* --------------------------------------------------------------------
   Mobile: hamburger + slide-out drawer
   -------------------------------------------------------------------- */
.sbpr-hamburger {
	display: none;
	flex-shrink: 0;
	width: 36px; height: 36px;
	background: #fff;
	border: 1px solid var(--sbpr-border);
	border-radius: 8px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	cursor: pointer;
}
.sbpr-hamburger span { width: 16px; height: 2px; background: var(--sbpr-ink); border-radius: 2px; }
.sbpr-sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 199;
}

@media (max-width: 860px) {
	.sbpr-hamburger { display: flex; }
	.sbpr-sidebar {
		position: fixed;
		top: 0; left: 0;
		height: 100vh;
		z-index: 200;
		transform: translateX(-100%);
		transition: transform 0.2s ease;
		box-shadow: 4px 0 20px rgba(0,0,0,0.1);
	}
	.sbpr-portal.is-sidebar-open .sbpr-sidebar { transform: translateX(0); }
	.sbpr-portal.is-sidebar-open .sbpr-sidebar-overlay { display: block; }
	.sbpr-portal-main { width: 100%; }

	/* Take the hamburger out of the flex flow entirely (absolute, pinned
	   left) and center the title across the full topbar width - this way
	   the two can never collide regardless of title length or screen
	   width, rather than relying on flex spacing alone. */
	.sbpr-portal-topbar { position: sticky; justify-content: center; }
	.sbpr-hamburger { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
	.sbpr-portal-title { text-align: center; width: 100%; }
}

/* --------------------------------------------------------------------
   Main content
   -------------------------------------------------------------------- */
.sbpr-portal-main { flex: 1; min-width: 0; }
.sbpr-portal-topbar {
	background: #fff;
	border-bottom: 1px solid var(--sbpr-border);
	padding: 14px 24px;
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 14px;
}
.sbpr-portal-title { font-size: 18px; font-weight: 700; }

.sbpr-portal-content { padding: 20px 24px 60px; max-width: 1100px; }

.sbpr-portal-section { display: none; }
.sbpr-portal-section.is-active { display: block; }

.sbpr-portal-panel {
	background: #fff;
	border: 1px solid var(--sbpr-border);
	border-radius: 12px;
	padding: 18px 20px;
	margin-top: 18px;
}
.sbpr-portal-panel h3 { margin: 0 0 12px; font-size: 15px; }
.sbpr-portal-panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}
.sbpr-portal-panel-header h3 { margin: 0; }
.sbpr-link-goto { font-size: 13px; font-weight: 600; color: var(--sbpr-green-dark); text-decoration: none; }

.sbpr-portal-stats { margin-top: 0; }
.sbpr-stat-link { text-decoration: none; display: block; transition: box-shadow 0.15s, transform 0.1s; }
.sbpr-stat-link:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.06); transform: translateY(-1px); }

.sbpr-empty { color: var(--sbpr-muted); font-size: 14px; padding: 10px 0; }
.sbpr-muted { color: var(--sbpr-muted); font-size: 13px; margin: -6px 0 10px; }

/* --------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------- */
.sbpr-portal-filterbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	align-items: center;
}
.sbpr-portal-filterbar input,
.sbpr-portal-filterbar select,
.sbpr-portal-perpage select,
.sbpr-portal-perpage-inline select {
	box-sizing: border-box;
	height: 36px;
	padding: 8px 10px;
	border: 1px solid var(--sbpr-border);
	border-radius: 8px;
	font-size: 13px;
	font-family: inherit;
	background: #fff;
}
.sbpr-portal-filterbar input[type="text"] { flex: 1; min-width: 180px; }
.sbpr-portal-perpage, .sbpr-portal-perpage-inline {
	font-size: 13px;
	color: var(--sbpr-muted);
	margin-top: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
/* When "Show" sits inline inside the same row as other filters (e.g. Partner
   Earnings), it must not carry its own top margin - the row's own
   align-items:center already centers it, and the stray margin is what made
   it look misaligned next to the other dropdown. */
.sbpr-portal-filterbar .sbpr-portal-perpage-inline { margin-top: 0; }

/* --------------------------------------------------------------------
   Portal tables / mobile cards (used by AJAX responses too)
   -------------------------------------------------------------------- */
.sbpr-portal-table { width: 100%; border-collapse: collapse; }
/* Responsiveness safety net: on a width where a table's columns don't all
   fit (a tablet, or a small laptop window, or any table with no mobile-card
   fallback of its own - e.g. the Reports/Coupons tables), the TABLE scrolls
   within its own box instead of forcing the whole page to scroll sideways.
   thead/tbody/tr keep display:table internally so columns still line up. */
.sbpr-portal-table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.sbpr-portal-table thead, .sbpr-portal-table tbody, .sbpr-portal-table tr { display: table; width: 100%; table-layout: auto; }
.sbpr-portal-table th, .sbpr-portal-table td {
	text-align: left;
	padding: 10px 8px;
	border-bottom: 1px solid var(--sbpr-border);
	font-size: 13.5px;
}
.sbpr-portal-table th { color: var(--sbpr-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.sbpr-portal-row { cursor: pointer; }
.sbpr-portal-row:hover { background: var(--sbpr-green-light); }

/* display:block here (not display:table) - must match .sbpr-portal-table's own
   display:block above, or this later rule silently wins the cascade and undoes
   the horizontal-scroll fix for exactly the tables that need it most. */
.sbpr-only-desktop-table { display: block; }
.sbpr-only-mobile-cards { display: none; }
@media (max-width: 720px) {
	.sbpr-only-desktop-table { display: none; }
	.sbpr-only-mobile-cards { display: block; }
}

.sbpr-portal-card {
	border: 1px solid var(--sbpr-border);
	border-radius: 10px;
	padding: 14px;
	margin-bottom: 10px;
	cursor: pointer;
}
.sbpr-portal-card-title { font-weight: 700; font-size: 15px; }
.sbpr-portal-card-sub { color: var(--sbpr-muted); font-size: 12px; margin-bottom: 8px; }
.sbpr-portal-card-row {
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
	font-size: 13px;
	border-top: 1px dashed var(--sbpr-border);
}
.sbpr-portal-card-row span:first-child { color: var(--sbpr-muted); }
.sbpr-portal-view-btn { margin-top: 10px; width: 100%; }

.sbpr-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 16px;
}
.sbpr-pagination-info { font-size: 13px; color: var(--sbpr-muted); }
.sbpr-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* --------------------------------------------------------------------
   Referral Tools
   -------------------------------------------------------------------- */
.sbpr-tools-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sbpr-btn-whatsapp { background: #25D366; color: #fff; }
.sbpr-btn-whatsapp:hover { background: #1ebe57; }

.sbpr-qr-box { text-align: center; }
#sbpr-portal-qr-canvas {
	display: inline-block;
	margin: 12px 0;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--sbpr-border);
	border-radius: 10px;
}

.sbpr-profile-readonly-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--sbpr-border);
}

/* --------------------------------------------------------------------
   Referral detail modal
   -------------------------------------------------------------------- */
.sbpr-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 300;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.sbpr-modal-overlay.is-open { display: flex; }
.sbpr-modal {
	background: #fff;
	border-radius: 14px;
	max-width: 480px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	padding: 24px;
	position: relative;
	box-sizing: border-box;
}
/* This modal is a sibling of .sbpr-wrap/.sbpr-portal, not a descendant, so
   it never inherited their box-sizing:border-box reset - without it, a
   <select> can render its intrinsic content width instead of respecting
   width:100% the same way a text <input> does, making it look narrower
   than the other fields in the same form even though both have the same
   CSS. Applying the reset directly here fixes every modal in both portals. */
.sbpr-modal * { box-sizing: border-box; }
.sbpr-modal select,
.sbpr-modal textarea,
.sbpr-modal input[type="text"],
.sbpr-modal input[type="email"],
.sbpr-modal input[type="tel"],
.sbpr-modal input[type="number"],
.sbpr-modal input[type="password"],
.sbpr-modal input[type="date"] {
	width: 100%;
	max-width: 100%;
}
.sbpr-modal-close {
	position: absolute;
	top: 12px; right: 14px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--sbpr-muted);
}
.sbpr-modal-header { margin-bottom: 14px; padding-right: 24px; }
.sbpr-modal-header h3 { margin: 0 0 2px; font-size: 17px; }
.sbpr-modal-sub { color: var(--sbpr-muted); font-size: 12px; }
.sbpr-modal-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}
.sbpr-modal-grid > div { display: flex; flex-direction: column; gap: 2px; }
.sbpr-modal-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sbpr-muted); }
.sbpr-modal-negative { background: #fdecea; color: #a33; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.sbpr-modal-timeline-title { font-size: 13px; margin: 4px 0 10px; color: var(--sbpr-muted); text-transform: uppercase; letter-spacing: 0.03em; }

.sbpr-timeline-list { list-style: none; margin: 0; padding: 0; }
.sbpr-timeline-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 13.5px;
	color: var(--sbpr-muted);
	position: relative;
}
.sbpr-timeline-list li:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 5px; top: 22px;
	width: 2px; height: 18px;
	background: var(--sbpr-border);
}
.sbpr-timeline-dot {
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--sbpr-border);
	flex-shrink: 0;
}
.sbpr-timeline-list li.is-reached { color: var(--sbpr-ink); font-weight: 600; }
.sbpr-timeline-list li.is-reached .sbpr-timeline-dot { background: var(--sbpr-green); }
.sbpr-timeline-list li.is-reached:not(:last-child)::before { background: var(--sbpr-green); }

/* --------------------------------------------------------------------
   Mobile refinements - tighter gutters so content isn't pinched on
   small phones (this is on top of the 860px sidebar-drawer breakpoint
   above, which already handles the structural layout change)
   -------------------------------------------------------------------- */
@media (max-width: 480px) {
	.sbpr-portal-topbar { padding: 12px 16px; }
	.sbpr-portal-content { padding: 16px 14px 48px; }
	.sbpr-portal-panel { padding: 14px 14px; }
	.sbpr-modal { padding: 18px 16px; border-radius: 12px; }
	.sbpr-modal-grid { grid-template-columns: 1fr; gap: 10px; }
	.sbpr-profile-readonly-grid { grid-template-columns: 1fr; }
	.sbpr-portal-filterbar input, .sbpr-portal-filterbar select { flex: 1 1 100%; }
}

/* "+ Refer a Client" button row and the form inside its popup */
.sbpr-portal-actions { margin: 0 0 14px; }
.sbpr-modal .sbpr-wrap { padding: 0; max-width: none; }
.sbpr-modal .sbpr-referral-form h2 { font-size: 17px; margin: 0 0 14px; padding-right: 24px; }

/* ==========================================================================
   TYPOGRAPHY SYSTEM
   One font family, one size scale and one "caption above value" pattern for
   everything the plugin renders (portals, popups, login and referral pages).

   Why this exists: the plugin previously set no font of its own, so every
   label, heading and value inherited whatever the active theme uses - and
   themes also restyle headings (size, case, letter-spacing) - which made
   text look mismatched and, on read-only pairs, run together.
   The selectors below are deliberately a little more specific than typical
   theme heading rules (e.g. ".theme-kit h3") so they win regardless of the
   order stylesheets load in.

   SCALE      12px  captions, hints, table headers, badges
              13px  secondary text, small buttons
              14px  table body, form labels, buttons, nav, alerts
              15px  body text and VALUES
              16px  panel headings
              18px  popup / page titles      20px  big numbers, auth titles
   WEIGHTS    400 body - 500 values - 600 labels/nav/buttons - 700 headings
   ========================================================================== */
:root {
	--sbpr-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sbpr-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Base + force the family onto every element type we render (theme rules often target buttons/inputs/labels directly) */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) {
	font-family: var(--sbpr-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--sbpr-ink);
	font-variant-numeric: lining-nums;
	-webkit-font-smoothing: antialiased;
}
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) :is(h1, h2, h3, h4, h5, h6, p, span, div, a, li, ul, ol, label, small, strong, b, em, td, th, button, input, select, textarea, summary) {
	font-family: var(--sbpr-font);
}
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) code { font-family: var(--sbpr-mono); font-size: 13px; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) :is(strong, b) { font-weight: 700; }

/* ---- Headings: never inherit the theme's display font, size, case or tracking ---- */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.3;
	color: var(--sbpr-ink);
}
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-portal-panel h3 { font-size: 16px; margin: 0 0 12px; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-portal-panel-header h3 { margin: 0; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-form h3 { font-size: 14px; color: var(--sbpr-green-dark); margin: 24px 0 10px; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-modal-header h3 { font-size: 18px; margin: 0 0 2px; }
body .sbpr-wrap.sbpr-auth-page h2, body .sbpr-wrap.sbpr-referral-form h2 { font-size: 20px; margin: 0 0 18px; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-modal .sbpr-referral-form h2 { font-size: 17px; margin: 0 0 14px; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-portal-title { font-size: 18px; font-weight: 700; }

/* ---- CAPTIONS: the small label that sits ABOVE a value (and table headers) ---- */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) :is(.sbpr-modal-label, .sbpr-modal-timeline-title, .sbpr-admin-detail-section h4, .sbpr-portal-table th, .sbpr-table th) {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sbpr-muted);
	line-height: 1.3;
}
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-modal-label { display: block; }   /* always on its own line - this is what stops "PARTNER CODEQUANT001" */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-modal-timeline-title, body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-admin-detail-section h4 { margin: 0 0 10px; }

/* ---- LABEL + VALUE PAIRS (profile details, referral/partner popups) ---- */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-modal-grid > div,
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-profile-readonly-grid > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-profile-readonly-grid { gap: 16px 28px; margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
/* The divider belongs to whatever FOLLOWS the details (e.g. the profile form), so it never dangles at the end of a panel */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-profile-readonly-grid + .sbpr-form { margin-top: 20px; padding-top: 2px; border-top: 1px solid var(--sbpr-border); }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-modal-grid > div > span:not(.sbpr-modal-label):not(.sbpr-badge),
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-profile-readonly-grid > div > span:not(.sbpr-modal-label) {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--sbpr-ink);
	overflow-wrap: anywhere;
}
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-modal-grid > div > .sbpr-badge { align-self: flex-start; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-modal-sub { font-size: 13px; color: var(--sbpr-muted); }

/* ---- Form fields ---- */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-form label:not(.sbpr-checkbox-pill):not(.sbpr-check-label) {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sbpr-ink);
	margin-bottom: 6px;
}
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-form .sbpr-check-label { font-size: 14px; font-weight: 400; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-form :is(input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea) {
	font-size: 15px;
	line-height: 1.4;
	color: var(--sbpr-ink);
}
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-portal-filterbar :is(input, select), body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-portal-perpage select, body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-portal-perpage-inline select { font-size: 14px; color: var(--sbpr-ink); }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) :is(small, .sbpr-field-hint) { font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--sbpr-muted); letter-spacing: 0; text-transform: none; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) :is(.sbpr-muted, .description) { font-size: 13px; font-weight: 400; color: var(--sbpr-muted); }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-field-label { font-size: 14px; font-weight: 600; color: var(--sbpr-ink); }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-checkbox-pill span { font-size: 14px; font-weight: 600; }

/* ---- Buttons, badges, alerts ---- */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-btn { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.2; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-btn-small { font-size: 13px; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-badge { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.4; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-alert { font-size: 14px; line-height: 1.45; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-empty { font-size: 14px; color: var(--sbpr-muted); }

/* ---- Tables ---- */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-portal-table td { font-size: 14px; line-height: 1.4; color: var(--sbpr-ink); font-variant-numeric: tabular-nums; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-portal-table td small { font-size: 12px; }

/* ---- Dashboard stat cards ---- */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-stat-num { font-size: 22px; font-weight: 700; line-height: 1.2; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-stat-label { font-size: 13px; font-weight: 500; color: var(--sbpr-muted); }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-admin-stat strong { font-size: 20px; font-weight: 700; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-admin-stat span { font-size: 12px; font-weight: 500; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-link-goto { font-size: 13px; font-weight: 600; }

/* ---- Sidebar ---- */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-sidebar-partner-name { font-size: 14px; font-weight: 700; line-height: 1.3; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-sidebar-partner-role { font-size: 12px; font-weight: 400; color: var(--sbpr-muted); }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-nav-item, body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-sidebar-logout { font-size: 14px; font-weight: 600; }

/* ---- Mobile referral cards, timelines, pagination, partner box ---- */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-portal-card-title { font-size: 16px; font-weight: 700; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-portal-card-sub { font-size: 12px; color: var(--sbpr-muted); }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-portal-card-row { font-size: 13px; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-portal-card-row > span:first-child { color: var(--sbpr-muted); font-weight: 400; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-portal-card-row > span:last-child:not(.sbpr-badge) { font-size: 14px; font-weight: 600; color: var(--sbpr-ink); text-align: right; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-timeline-list li { font-size: 14px; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-admin-timeline li { font-size: 13px; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-pagination-info { font-size: 13px; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-referral-partner-box { font-size: 14px; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-referral-partner-contact { font-size: 13px; color: var(--sbpr-muted); }

/* ---- Spacing fixes ---- */
/* Stacked inputs in one field (City / State / Country) must not touch */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-form p > :is(input, select, textarea) + :is(input, select, textarea) { margin-top: 8px; }
/* Mobile card rows: label and value always keep a minimum gap between them */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-portal-card-row { gap: 12px; align-items: center; }
/* IDs and dates read as one unit - never wrap "SB-REF-000001" or "24 Sep 2026" across two lines */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-nowrap { white-space: nowrap; }
/* The "View Partner" button sits on a tinted box, so give it its own background or it disappears */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-referral-partner-box .sbpr-btn { background: #fff; border: 1px solid var(--sbpr-border); }

/* Room between the multi-select pills and whatever follows them */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-interest-field { margin-bottom: 20px; }

/* Date range in the Referrals filter bar: a visible "From [date]  To [date]" pair
   (previously two identical unlabelled boxes), kept together when the bar wraps */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-filter-daterange { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-filter-date { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-filter-date > span { font-size: 13px; font-weight: 600; color: var(--sbpr-muted); }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-filter-date input { flex: 0 0 auto; width: auto; min-width: 0; }

/* "Signed in, but not here" pages (staff opening the Partner Portal, a partner opening /admin/) */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-account-notice-text { margin: 0 0 20px; text-align: center; font-size: 15px; line-height: 1.55; color: var(--sbpr-muted); }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-account-notice-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-account-notice-actions .sbpr-btn { text-decoration: none; padding: 12px 16px; }

/* Phones: inputs stay at 16px so iOS doesn't zoom the page when one is tapped */
@media (max-width: 767px) {
	body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-form :is(input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], select, textarea),
	body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-portal-filterbar :is(input, select) { font-size: 16px; }
}
@media (max-width: 767px) {
	body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-filter-daterange { width: 100%; }
	body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-filter-date { flex: 1 1 calc(50% - 7px); }
	body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-filter-date input { flex: 1 1 auto; width: 100%; }
	body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-filter-date > span { min-width: 40px; } /* so the two date boxes line up */
}

/* "My Partner Coupon" display (Referral Tools) - a code, its discount, and a Copy button */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-coupon-display {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	padding: 12px 16px; margin-bottom: 10px;
	background: var(--sbpr-green-light); border: 1px solid var(--sbpr-border); border-radius: 8px;
}
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-coupon-display.is-inactive { background: #f4f4f2; opacity: 0.75; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-coupon-display code { font-size: 16px; font-weight: 700; letter-spacing: 0.03em; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-coupon-discount { font-size: 14px; font-weight: 600; color: var(--sbpr-green-dark); }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-coupon-display .sbpr-btn { margin-left: auto; }

/* Coupon code field on the public referral form: always uppercase, like a real coupon box */
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-coupon-input { text-transform: uppercase; letter-spacing: 0.03em; }
body :is(.sbpr-portal, .sbpr-modal-overlay, .sbpr-wrap) .sbpr-coupon-message { display: block; font-size: 13px; margin-top: 4px; }