/* ==========================================================================
   SmartBite Partner Portal — brand palette sampled from the SmartBite logo
   ========================================================================== */
:root {
	--sbpr-green: #7E9562;
	--sbpr-green-dark: #5F7548;
	--sbpr-green-light: #EEF2E8;
	--sbpr-orange: #DF8633;
	--sbpr-orange-dark: #C06F1F;
	--sbpr-tan: #D6A774;
	--sbpr-ink: #2B2F27;
	--sbpr-muted: #767b70;
	--sbpr-border: #e6e8e2;
	--sbpr-bg: #fafaf8;
}

.sbpr-wrap {
	max-width: 720px;
	margin: 0 auto;
	padding: 20px 16px 40px;
	box-sizing: border-box;
	font-size: 16px;
	color: var(--sbpr-ink);
}
.sbpr-wrap * { box-sizing: border-box; }

/* --------------------------------------------------------------------
   Branded header + account menu (replaces the old plain link row)
   -------------------------------------------------------------------- */
.sbpr-topbar {
	background: #fff;
	border-bottom: 1px solid var(--sbpr-border);
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
	position: sticky;
	top: 0;
	z-index: 100;
}
.sbpr-topbar-inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 16px;
}
.sbpr-logo { display: flex; align-items: center; flex-shrink: 0; }
.sbpr-logo img { height: 34px; width: auto; display: block; }

.sbpr-topbar-links {
	display: none;
	gap: 4px;
	flex: 1;
}
.sbpr-toplink {
	padding: 8px 12px;
	border-radius: 6px;
	color: var(--sbpr-muted);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}
.sbpr-toplink:hover { background: var(--sbpr-green-light); color: var(--sbpr-green-dark); }
.sbpr-toplink.is-active { background: var(--sbpr-green-light); color: var(--sbpr-green-dark); }

.sbpr-account { position: relative; margin-left: auto; }
.sbpr-account-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid var(--sbpr-border);
	border-radius: 999px;
	padding: 5px 10px 5px 5px;
	cursor: pointer;
	font-family: inherit;
}
.sbpr-account-btn:hover { border-color: var(--sbpr-green); }
.sbpr-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--sbpr-green);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
	flex-shrink: 0;
}
.sbpr-account-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--sbpr-ink);
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sbpr-caret { color: var(--sbpr-muted); flex-shrink: 0; transition: transform 0.15s; }
.sbpr-account.is-open .sbpr-caret { transform: rotate(180deg); }

.sbpr-account-menu {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	background: #fff;
	border: 1px solid var(--sbpr-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	min-width: 190px;
	overflow: hidden;
	z-index: 200;
}
.sbpr-account.is-open .sbpr-account-menu { display: block; }
.sbpr-account-menu-item {
	display: block;
	padding: 11px 16px;
	color: var(--sbpr-ink);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	border-bottom: 1px solid var(--sbpr-border);
}
.sbpr-account-menu-item:last-child { border-bottom: none; }
.sbpr-account-menu-item:hover { background: var(--sbpr-green-light); }
.sbpr-account-menu-logout { color: var(--sbpr-orange-dark); font-weight: 600; }
.sbpr-account-menu-logout:hover { background: #fdf1e6; }

.sbpr-only-mobile { display: block; }
.sbpr-only-desktop { display: none; }

@media (min-width: 620px) {
	.sbpr-topbar-links { display: flex; }
	.sbpr-only-mobile { display: none; }
	.sbpr-only-desktop { display: block; }
}

/* --------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------- */
.sbpr-form p { margin: 0 0 14px; }
.sbpr-form label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.sbpr-form input[type="text"],
.sbpr-form input[type="tel"],
.sbpr-form input[type="email"],
.sbpr-form input[type="password"],
.sbpr-form input[type="number"],
.sbpr-form input[type="date"],
.sbpr-form select,
.sbpr-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 8px;
	font-size: 16px; /* prevents iOS zoom-on-focus */
	font-family: inherit;
}
.sbpr-form input:focus, .sbpr-form select:focus, .sbpr-form textarea:focus {
	outline: none;
	border-color: var(--sbpr-green);
	box-shadow: 0 0 0 3px var(--sbpr-green-light);
}
.sbpr-form h3 { margin: 24px 0 10px; font-size: 16px; color: var(--sbpr-green-dark); }

.sbpr-btn {
	display: inline-block;
	padding: 11px 20px;
	border-radius: 8px;
	border: none;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	font-size: 15px;
	font-family: inherit;
}
.sbpr-btn-primary { background: var(--sbpr-green); color: #fff; }
.sbpr-btn-primary:hover { background: var(--sbpr-green-dark); }
.sbpr-btn-secondary { background: #f1f2ee; color: var(--sbpr-ink); margin-right: 8px; }
.sbpr-btn-secondary:hover { background: #e6e8e0; }

.sbpr-alert { padding: 11px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.sbpr-alert-error { background: #fdecea; color: #a33; }
.sbpr-alert-success { background: var(--sbpr-green-light); color: var(--sbpr-green-dark); }

/* --------------------------------------------------------------------
   Dashboard stat cards
   -------------------------------------------------------------------- */
.sbpr-stats-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin: 18px 0;
}
@media (min-width: 560px) {
	.sbpr-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
.sbpr-stat {
	background: var(--sbpr-bg);
	border: 1px solid var(--sbpr-border);
	border-radius: 10px;
	padding: 14px 10px;
	text-align: center;
}
.sbpr-stat-num { display: block; font-size: 22px; font-weight: 800; color: var(--sbpr-green-dark); }
.sbpr-stat-label { display: block; font-size: 12px; color: var(--sbpr-muted); margin-top: 3px; }

.sbpr-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sbpr-table th, .sbpr-table td {
	text-align: left;
	padding: 9px 6px;
	border-bottom: 1px solid var(--sbpr-border);
	font-size: 14px;
}
.sbpr-table th { color: var(--sbpr-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }

.sbpr-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
	background: #eee;
}
.sbpr-badge-converted { background: var(--sbpr-green-light); color: var(--sbpr-green-dark); }
.sbpr-badge-new { background: #eaf1fb; color: #2560c4; }
.sbpr-badge-duplicate,
.sbpr-badge-lost,
.sbpr-badge-not_interested,
.sbpr-badge-not_reachable { background: #fdecea; color: #a33; }
.sbpr-badge-paid { background: var(--sbpr-green-light); color: var(--sbpr-green-dark); }
.sbpr-badge-pending { background: #fdf1e0; color: var(--sbpr-orange-dark); }
.sbpr-badge-approved { background: #eaf1fb; color: #2560c4; }

.sbpr-referral-link-box, .sbpr-qr-box, .sbpr-recent-referrals, .sbpr-commissions {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--sbpr-border);
}
.sbpr-referral-link-box h3, .sbpr-qr-box h3, .sbpr-recent-referrals h3 { margin-bottom: 10px; }
.sbpr-referral-url code {
	display: block;
	background: var(--sbpr-bg);
	border: 1px solid var(--sbpr-border);
	padding: 10px 12px;
	border-radius: 8px;
	word-break: break-all;
	margin-bottom: 10px;
	font-size: 13px;
}
.sbpr-qr-box { text-align: center; }
#sbpr-qr-canvas {
	display: inline-block;
	margin: 14px 0;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--sbpr-border);
	border-radius: 10px;
}

.sbpr-referred-by { color: var(--sbpr-muted); margin-top: -8px; }
.sbpr-referred-by strong { color: var(--sbpr-green-dark); }

/* --------------------------------------------------------------------
   Auth-style pages (login, client referral landing) - centered card
   with logo, used for the highest-trust first-touch moments
   -------------------------------------------------------------------- */
.sbpr-auth-page {
	max-width: 420px;
	margin: 40px auto;
	padding: 32px 28px;
	background: #fff;
	border: 1px solid var(--sbpr-border);
	border-radius: 14px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.05);
	text-align: center;
}
.sbpr-auth-page .sbpr-form,
.sbpr-auth-page form { text-align: left; }
.sbpr-auth-logo { margin-bottom: 18px; }
.sbpr-auth-logo img { height: 42px; width: auto; }
.sbpr-auth-page h2 { margin: 0 0 18px; font-size: 20px; }
.sbpr-auth-footer { text-align: center; margin-top: 4px !important; }
.sbpr-auth-footer a { color: var(--sbpr-muted); font-size: 13px; }
.sbpr-btn-block { display: block; width: 100%; text-align: center; }

@media (max-width: 480px) {
	.sbpr-auth-page { margin: 16px; padding: 24px 18px; border-radius: 12px; }
	.sbpr-wrap { padding: 16px 12px 32px; }
}

/* --------------------------------------------------------------------
   Commission column inline with referral status (dashboard + lists)
   -------------------------------------------------------------------- */
.sbpr-commission-amount { font-weight: 700; color: var(--sbpr-green-dark); }
.sbpr-commission-amount.is-empty { color: var(--sbpr-muted); font-weight: 400; }


/* --------------------------------------------------------------------
   Multi-select "pills" (referral form: What would you like help with?)
   The native checkbox stays in the DOM (keyboard + screen-reader
   friendly) but is visually hidden; the label text becomes the pill.
   -------------------------------------------------------------------- */
.sbpr-interest-field { margin: 0 0 14px; }
.sbpr-field-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.sbpr-field-hint { display: block; font-size: 12px; color: var(--sbpr-muted); margin-bottom: 8px; }
.sbpr-checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; }
.sbpr-form .sbpr-checkbox-pill { display: inline-block; margin: 0; position: relative; cursor: pointer; }
.sbpr-checkbox-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sbpr-checkbox-pill span {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid #ccc;
	border-radius: 999px;
	background: #fff;
	color: var(--sbpr-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.sbpr-checkbox-pill:hover span { border-color: var(--sbpr-green); }
.sbpr-checkbox-pill input:checked + span {
	background: var(--sbpr-green-light);
	border-color: var(--sbpr-green);
	color: var(--sbpr-green-dark);
}
.sbpr-checkbox-pill input:checked + span::before { content: '\2713\00a0'; }
.sbpr-checkbox-pill input:focus-visible + span { box-shadow: 0 0 0 3px var(--sbpr-green-light); border-color: var(--sbpr-green); }
.sbpr-field-error { display: none; color: #a33; font-size: 13px; margin-top: 8px; }
.sbpr-field-error.is-visible { display: block; }