/*
 * RBS Premium Theme
 *
 * Shared design system for plugin pages that were previously plain,
 * unstyled HTML (certificate view, wallet, marketplace settings, and
 * other instructor dashboard pages) — same gold/black/cream palette
 * already used elsewhere on the site (rbs-ui.css's #D4AF37 accent,
 * the redesigned certificate PDF), applied consistently so these
 * pages look like part of one considered product instead of raw
 * default markup.
 *
 * Classes are deliberately generic/reusable (.rbs-premium-card,
 * .rbs-stat-grid, .rbs-form-group, etc.) rather than one-off per
 * page, so any future plain page can adopt this look by using these
 * classes instead of writing new CSS from scratch.
 */

:root{
	--rbs-gold: #D4AF37;
	--rbs-gold-dark: #a9861f;
	--rbs-black: #16171a;
	--rbs-ink: #2b2d31;
	--rbs-muted: #6e727a;
	--rbs-border: #e7e3d8;
	--rbs-cream: #fdf9f0;
	--rbs-card-radius: 14px;

	/* Space reserved above every standalone shortcode-page wrapper on
	   desktop so the active theme's site header doesn't overlap the
	   first heading/line of content (it doesn't overlap on mobile,
	   where most themes swap the sticky desktop nav for a plain,
	   non-fixed mobile bar). 96px matches a typical WP fixed-header
	   height; if the live theme's header is taller/shorter, adjust
	   this single value and every page below updates together. */
	--rbs-header-offset: 96px;
}

/* ---------- Desktop header clearance for standalone shortcode pages ----------
   Every page below is meant to be dropped, on its own, as the entire
   content of a WP page via one of the plugin's shortcodes (learning
   portfolio, learning partner profile, instructor profile, affiliate
   profile, directories, marketplaces, dashboards, application/plans
   pages). None of them reserved any top space of their own, so once
   the theme's header becomes fixed/sticky at desktop widths it sits
   on top of the page's opening heading and copy. This is desktop-only
   (min-width matches the plugin's existing mobile/desktop breakpoint
   used elsewhere in this file) because the mobile header isn't fixed,
   so mobile already renders correctly and doesn't need the extra
   space. !important matches this file's existing pattern for beating
   theme CSS that would otherwise win on specificity. */
@media (min-width: 768px){
	.rbs-lpf-wrapper,
	.rbs-lps-wrapper,
	.rbs-lp-profile,
	.rbs-lp-directory,
	.rbs-instructor-profile,
	.rbs-aff-profile,
	.rbs-affiliate-marketplace,
	.rbs-partner-marketplace,
	.rbs-lp-application,
	.rbs-student-dashboard,
	.rbs-premium-page,
	.rbs-affiliate-dashboard-wrap{
		margin-top: var(--rbs-header-offset) !important;
	}
}

/* ---------- Page wrapper ---------- */
.rbs-premium-page{
	max-width: 960px;
	margin: 0 auto;
	padding: 32px 20px 56px;
	color: var(--rbs-ink);
	font-family: inherit;
}

.rbs-premium-page h1.rbs-page-title{
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 6px;
	color: var(--rbs-black);
}

.rbs-premium-page p.rbs-page-subtitle{
	color: var(--rbs-muted);
	margin: 0 0 28px;
	font-size: 15px;
}

/* ---------- Generic card ---------- */
.rbs-premium-card{
	background: #fff;
	border: 1px solid var(--rbs-border);
	border-radius: var(--rbs-card-radius);
	box-shadow: 0 2px 14px rgba(20,20,20,.05);
	padding: 24px;
	margin-bottom: 20px;
}

.rbs-premium-card h2,
.rbs-premium-card h3{
	margin-top: 0;
	color: var(--rbs-black);
}

/* ---------- Stat grid (wallet, earnings, etc.) ---------- */
.rbs-stat-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin-bottom: 28px;
}

.rbs-stat-card{
	background: linear-gradient(145deg, var(--rbs-black), #26282d);
	color: #fff !important;
	border-radius: var(--rbs-card-radius);
	padding: 20px 22px;
	box-shadow: 0 4px 18px rgba(0,0,0,.18);
}

.rbs-stat-card .rbs-stat-label{
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: rgba(255,255,255,.75) !important;
	margin-bottom: 8px;
}

.rbs-stat-card .rbs-stat-value{
	display: block;
	font-size: 26px;
	font-weight: 800;
	color: var(--rbs-gold) !important;
}

.rbs-stat-card.rbs-stat-card-accent{
	background: linear-gradient(145deg, var(--rbs-gold-dark), var(--rbs-gold));
}

.rbs-stat-card.rbs-stat-card-accent .rbs-stat-label{
	color: rgba(20,20,20,.6);
}

.rbs-stat-card.rbs-stat-card-accent .rbs-stat-value{
	color: var(--rbs-black);
}

/* ---------- Forms ---------- */
.rbs-form-group{
	margin-bottom: 20px;
}

.rbs-form-group label,
.rbs-form-group > strong{
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: var(--rbs-black);
	margin-bottom: 6px;
}

.rbs-form-group .rbs-form-hint{
	display: block;
	font-size: 13px;
	color: var(--rbs-muted);
	margin-bottom: 8px;
}

.rbs-bank-search-wrap{
	position: relative;
}

.rbs-bank-suggestions{
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 50;
	background: #fff;
	border: 1px solid #e4e7e5;
	border-top: none;
	border-radius: 0 0 10px 10px;
	max-height: 240px;
	overflow-y: auto;
	box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

.rbs-bank-suggestion-item{
	padding: 12px 14px;
	font-size: 14px;
	color: #1a1d1f;
	cursor: pointer;
	border-bottom: 1px solid #f0f2f0;
}

.rbs-bank-suggestion-item:last-child{
	border-bottom: none;
}

.rbs-bank-suggestion-item:hover,
.rbs-bank-suggestion-item:active{
	background: #fbfcfb;
	color: var(--rbs-gold, #DCAD60);
}

.rbs-form-group input[type="text"],
.rbs-form-group input[type="url"],
.rbs-form-group input[type="email"],
.rbs-form-group input[type="number"],
.rbs-form-group textarea,
.rbs-form-group select{
	width: 100%;
	max-width: 480px;
	padding: 11px 14px;
	border: 1px solid var(--rbs-border);
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
	box-sizing: border-box;
}

.rbs-form-group input:focus,
.rbs-form-group textarea:focus,
.rbs-form-group select:focus{
	outline: none;
	border-color: var(--rbs-gold);
	box-shadow: 0 0 0 3px rgba(212,175,55,.18);
}

.rbs-form-checkbox{
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	margin-bottom: 20px;
}

/* ---------- Buttons ---------- */
.rbs-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform .15s ease, opacity .15s ease;
}

.rbs-btn:hover{
	opacity: .92;
}

.rbs-btn-primary{
	background: var(--rbs-gold);
	color: var(--rbs-black);
}

.rbs-btn-dark{
	background: var(--rbs-black);
	color: #fff !important;
}

.rbs-btn-outline{
	background: transparent;
	color: var(--rbs-black);
	border: 1.5px solid var(--rbs-black);
}

/* ---------- Tables ---------- */
.rbs-premium-table{
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.rbs-premium-table th{
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--rbs-muted);
	padding: 10px 12px;
	border-bottom: 2px solid var(--rbs-border);
}

.rbs-premium-table td{
	padding: 12px;
	border-bottom: 1px solid var(--rbs-border);
}

.rbs-premium-table tr:last-child td{
	border-bottom: none;
}

/* ==========================================================================
   Certificate view page ([rbs_certificate])
   ========================================================================== */

.rbs-certificate-wrapper{
	max-width: 900px;
	margin: 32px auto 56px;
	padding: 0 20px;
}

/* ---------- Toolbar: Print/Copy on the left, Share icons on the
   right, one tidy row instead of a loose wrap of full-width pills.
   This is the "scattered, undefined" row from the screenshot,
   rebuilt as a single deliberate component. ---------- */
.rbs-certificate-toolbar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--rbs-border);
}

.rbs-cert-toolbar-group{
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Print / Copy — small, quiet, outline-style buttons. Not brand
   share actions, so they stay neutral (black/gold) rather than
   colored like the platform icons. */
.rbs-cert-btn{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 13px;
	border-radius: 7px;
	font-weight: 700;
	font-size: 12.5px;
	text-decoration: none;
	border: 1.5px solid var(--rbs-black);
	background: #fff;
	color: var(--rbs-black);
	cursor: pointer;
	line-height: 1.2;
	transition: opacity .15s ease, transform .1s ease;
}

.rbs-cert-btn:hover{ opacity: .8; }
.rbs-cert-btn:active{ transform: scale(.97); }

.rbs-cert-btn-dark{
	background: var(--rbs-black);
	color: var(--rbs-gold) !important;
	border-color: var(--rbs-black);
}

.rbs-cert-btn-icon{
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* Share group — a small "Share" label plus a tight row of compact
   circular icon buttons, instead of four full-width colored pills
   each carrying its own text label (the "horrible" part). */
.rbs-cert-share-group{
	display: flex;
	align-items: center;
	gap: 7px;
}

.rbs-cert-share-label{
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--rbs-muted);
	margin-right: 2px;
}

.rbs-cert-icon-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	text-decoration: none;
	line-height: 1;
	transition: opacity .15s ease, transform .1s ease;
	flex-shrink: 0;
}

.rbs-cert-icon-btn:hover{ opacity: .85; }
.rbs-cert-icon-btn:active{ transform: scale(.93); }

.rbs-cert-icon-svg{
	width: 15px;
	height: 15px;
}

.rbs-cert-icon-linkedin{ background: #0a66c2; }
.rbs-cert-icon-whatsapp{ background: #25d366; }
.rbs-cert-icon-facebook{ background: #1877f2; }
.rbs-cert-icon-twitter{ background: #000; }

/* ---------- Read-only verification badge (non-owner view) ---------- */
.rbs-certificate-verification-badge{
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 24px;
	padding: 14px 18px;
	border: 1px solid var(--rbs-gold);
	border-radius: 10px;
	background: var(--rbs-black);
	color: var(--rbs-gold) !important;
}

.rbs-certificate-verification-badge strong{
	font-size: 14px;
	color: var(--rbs-gold) !important;
}

.rbs-certificate-verification-badge span{
	font-size: 13px;
	color: #e2e2e6 !important;
}

/* ---------- Credential detail card ---------- */
.rbs-credential-detail{
	max-width: 520px;
	margin: 0 auto 28px;
	padding: 24px 26px;
	background: var(--rbs-black);
	border: 1px solid rgba(212,175,55,.3);
	border-radius: 14px;
	color: #f2f1ec !important;
}

.rbs-credential-title{
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 800;
	color: #f2f1ec !important;
}

.rbs-credential-subtitle{
	margin: 0 0 18px;
	font-size: 13.5px;
	color: #b8b8bc !important;
}

.rbs-credential-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	font-size: 13px;
}

.rbs-credential-label{
	display: block;
	color: #9a9a9e !important;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 3px;
}

.rbs-credential-value{
	font-weight: 700;
	color: #f2f1ec !important;
}

.rbs-credential-value-verified{
	color: var(--rbs-gold) !important;
}

.rbs-certificate{
	background: var(--rbs-cream);
	border: 1px solid var(--rbs-border);
	border-radius: 18px;
	padding: 48px 40px;
	box-shadow: 0 8px 40px rgba(20,20,20,.08);
	position: relative;
	overflow: hidden;
}

.rbs-certificate::before{
	content: "";
	position: absolute;
	inset: 14px;
	border: 1.5px solid var(--rbs-gold);
	border-radius: 10px;
	pointer-events: none;
}

.rbs-certificate-header{
	text-align: center;
	margin-bottom: 28px;
}

.rbs-certificate-header h1{
	font-size: 32px;
	font-weight: 800;
	color: var(--rbs-black);
	margin: 0 0 6px;
	letter-spacing: .02em;
}

.rbs-certificate-header h2{
	font-size: 15px;
	font-weight: 700;
	color: var(--rbs-gold-dark);
	text-transform: uppercase;
	letter-spacing: .08em;
	margin: 0;
}

.rbs-certificate-body{
	text-align: center;
	margin-bottom: 32px;
}

.rbs-certificate-body p{
	color: var(--rbs-muted);
	font-size: 15px;
	margin: 0 0 6px;
}

.rbs-certificate-body .rbs-student-name{
	font-size: 34px;
	font-weight: 800;
	color: var(--rbs-black);
	margin: 6px 0 18px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--rbs-gold);
	display: inline-block;
}

.rbs-certificate-body .rbs-course-name{
	font-size: 20px;
	font-weight: 700;
	color: var(--rbs-black);
	margin: 0 0 22px;
}

.rbs-certificate-body p strong{
	color: var(--rbs-ink);
}

.rbs-certificate-footer{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	border-top: 1px solid var(--rbs-border);
	padding-top: 24px;
}

.rbs-signature hr{
	border: none;
	border-top: 1.5px solid var(--rbs-gold);
	width: 200px;
	margin: 0 0 8px;
}

.rbs-signature strong{
	display: block;
	color: var(--rbs-black);
	font-size: 15px;
}

.rbs-signature span{
	font-size: 12px;
	color: var(--rbs-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.rbs-qr{
	text-align: right;
}

.rbs-certificate-error,
.rbs-certificate-not-found,
.rbs-certificate-revoked{
	background: #fff5f5;
	border: 1px solid #f3c6c6;
	color: #8a1f1f;
	padding: 16px 20px;
	border-radius: 10px;
	font-size: 14px;
}

.rbs-certificate-valid{
	background: #eef9f0;
	border: 1px solid #b7e0c0;
	color: #0a4d26;
	padding: 14px 18px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 16px;
}

@media print{
	.rbs-certificate-toolbar{ display: none; }
	.rbs-certificate-wrapper{ margin: 0; padding: 0; max-width: none; }
}

@media (max-width: 640px){
	/* Cuts the plugin's own contribution to the top gap on mobile —
	   this 32px top margin was applying at every width, not just
	   desktop (unlike the header-clearance margin elsewhere in this
	   file, which is desktop-only on purpose because mobile headers
	   aren't fixed/sticky). Note: if there is STILL a large empty
	   gap above this after updating, that space is coming from the
	   page's own WPBakery row settings (the row this [rbs_certificate]
	   shortcode sits in has its own "top margin / top border" values
	   set in the row's Design Options), not from this plugin — that
	   part has to be cleared from the page editor directly, since a
	   plugin can't reach into another element's page-builder settings. */
	.rbs-certificate-wrapper{ margin-top: 16px; }

	.rbs-certificate{ padding: 30px 20px; }
	.rbs-certificate-header h1{ font-size: 24px; }
	.rbs-certificate-body .rbs-student-name{ font-size: 24px; }
	.rbs-certificate-footer{ flex-direction: column; align-items: flex-start; }
	.rbs-qr{ text-align: left; }

	/* Toolbar: stack the two groups instead of forcing them onto
	   one cramped row, and shrink the icon buttons slightly further. */
	.rbs-certificate-toolbar{
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.rbs-cert-toolbar-group{
		justify-content: center;
	}

	.rbs-cert-share-group{
		justify-content: center;
	}

	.rbs-cert-icon-btn{
		width: 30px;
		height: 30px;
	}

	.rbs-credential-detail{
		padding: 20px 18px;
	}

	.rbs-credential-grid{
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

@media (max-width: 380px){
	/* Print/Copy labels drop to icon-only on the narrowest phones —
	   the icon plus a title/aria-label tooltip is enough context,
	   and this is what keeps the toolbar from ever wrapping awkwardly. */
	.rbs-cert-btn-label{
		display: none;
	}

	.rbs-cert-btn{
		padding: 8px;
	}
}

/* ---------- Certificate search/verify form variant ---------- */
.rbs-certificate-verification{
	max-width: 640px;
	margin: 32px auto 56px;
	padding: 0 20px;
}

.rbs-certificate-verification h2{
	font-size: 24px;
	font-weight: 800;
	color: var(--rbs-black);
	margin-bottom: 20px;
}

.rbs-certificate-search-form{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	background: #fff;
	border: 1px solid var(--rbs-border);
	border-radius: var(--rbs-card-radius);
	padding: 20px;
	margin-bottom: 24px;
}

.rbs-certificate-search-form label{
	display: block;
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 6px;
	color: var(--rbs-black);
	width: 100%;
}

.rbs-certificate-search-form input[type="text"]{
	flex: 1 1 240px;
	/* Without min-width:0, a flex item's default minimum width is its
	   content size — and text inputs have a large built-in intrinsic
	   width browsers won't shrink below on their own. On a narrow
	   phone screen that's wider than the form/card, so the input
	   refused to shrink and spilled out past the white card's edge.
	   min-width:0 lets flexbox actually shrink it to fit; width:100%
	   plus box-sizing:border-box (padding/border weren't previously
	   counted inside the flex-basis) keeps it from ever exceeding the
	   space it's given. */
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	border: 1px solid var(--rbs-border);
	border-radius: 8px;
	font-size: 14px;
}

.rbs-certificate-search-form button{
	padding: 11px 24px;
	background: var(--rbs-gold);
	color: var(--rbs-black);
	border: none;
	border-radius: 8px;
	font-weight: 700;
	cursor: pointer;
}

.rbs-certificate-verify-result{
	background: #fff;
	border: 1px solid var(--rbs-border);
	border-radius: var(--rbs-card-radius);
	padding: 20px;
}

.rbs-certificate-verify-details th{
	text-align: left;
	color: var(--rbs-muted);
	font-size: 12px;
	text-transform: uppercase;
	padding: 8px 12px 8px 0;
}

@media (max-width: 480px){
	/* Button stacks full-width under the now-properly-shrunk input,
	   instead of sitting cramped beside it. */
	.rbs-certificate-search-form button{
		flex: 1 1 100%;
		width: 100%;
	}
}

.rbs-certificate-verify-details td{
	padding: 8px 0;
	font-weight: 600;
	color: var(--rbs-ink);
}

/* ---------- Wallet balance widget ([rbs_wallet_balance]) ---------- */
/* Used on the Wallet dashboard page, the affiliate dashboard, and the
   instructor quick-links panel — restyled once here so all of them
   benefit, no PHP changes needed since the existing markup already
   has distinct, well-named classes. */
.rbs-wallet-balance{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin: 20px 0 28px;
}

.rbs-wallet-balance__main,
.rbs-wallet-balance__row{
	background: linear-gradient(145deg, var(--rbs-black), #26282d);
	border-radius: var(--rbs-card-radius);
	padding: 20px 22px;
	box-shadow: 0 4px 18px rgba(0,0,0,.18);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rbs-wallet-balance__main{
	background: linear-gradient(145deg, var(--rbs-gold-dark), var(--rbs-gold));
}

.rbs-wallet-balance__label{
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: rgba(255,255,255,.75) !important;
}

.rbs-wallet-balance__main .rbs-wallet-balance__label{
	color: rgba(20,20,20,.7) !important;
}

.rbs-wallet-balance__amount{
	font-size: 24px;
	font-weight: 800;
	color: var(--rbs-gold) !important;
}

.rbs-wallet-balance__main .rbs-wallet-balance__amount{
	color: var(--rbs-black) !important;
	font-size: 28px;
}

.rbs-wallet-balance--logged-out{
	background: #fff;
	border: 1px solid var(--rbs-border);
	border-radius: var(--rbs-card-radius);
	padding: 20px;
}

/* ---------- Upgrade existing shared dashboard classes to the premium look ---------- */
/* .rbs-cards-grid / .rbs-card / .rbs-table already exist (rbs-ui.css)
   and are used across Earnings, Sales History, Financial Reports,
   Payment History, Commission Settings, Withdrawals, etc. — this
   file loads after rbs-ui.css, so these rules upgrade the look on
   every one of those pages at once without editing each template. */

.rbs-dashboard-page .rbs-cards-grid,
.rbs-cards-grid-homepage{
	gap: 16px;
}

.rbs-dashboard-page .rbs-card,
.rbs-cards-grid-homepage .rbs-card{
	background: linear-gradient(145deg, var(--rbs-black), #26282d);
	border: none;
	border-radius: var(--rbs-card-radius);
	padding: 20px 22px;
	box-shadow: 0 4px 18px rgba(0,0,0,.18);
}

.rbs-dashboard-page .rbs-card .rbs-card-label,
.rbs-cards-grid-homepage .rbs-card .rbs-card-label{
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: rgba(255,255,255,.75) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.rbs-dashboard-page .rbs-card .rbs-card-value,
.rbs-cards-grid-homepage .rbs-card .rbs-card-value{
	font-size: clamp(15px, 4.2vw, 24px);
	font-weight: 800;
	color: var(--rbs-gold) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	display: block;
}

.rbs-dashboard-page h3,
.rbs-dashboard-page h4{
	color: var(--rbs-black);
}

.rbs-dashboard-page .rbs-table,
.rbs-dashboard-page .tutor-table{
	background: #fff;
	border: 1px solid var(--rbs-border);
	border-radius: var(--rbs-card-radius);
	overflow: hidden;
	border-collapse: separate;
	border-spacing: 0;
}

.rbs-dashboard-page .rbs-table th,
.rbs-dashboard-page .tutor-table th{
	background: #faf8f2;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--rbs-muted);
	border-bottom: 2px solid var(--rbs-border);
}

.rbs-dashboard-page .rbs-table td,
.rbs-dashboard-page .tutor-table td{
	border-bottom: 1px solid var(--rbs-border);
}

.rbs-dashboard-page .rbs-table tr:last-child td,
.rbs-dashboard-page .tutor-table tr:last-child td{
	border-bottom: none;
}

.rbs-dashboard-page .tutor-btn-primary,
.rbs-dashboard-page button.tutor-btn-primary{
	background: var(--rbs-gold) !important;
	border-color: var(--rbs-gold) !important;
	color: var(--rbs-black) !important;
	font-weight: 700 !important;
}

/* ---------- My Certificates list ([rbs_my_certificates]) ---------- */
.rbs-my-certificates{
	max-width: 900px;
	margin: 24px auto 48px;
	padding: 0 16px;
}

.rbs-my-certificates h2{
	font-size: 24px;
	font-weight: 800;
	color: var(--rbs-black);
	margin-bottom: 20px;
}

.rbs-my-certificates .rbs-certificates-table{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #fff;
	border: 1px solid var(--rbs-border);
	border-radius: var(--rbs-card-radius);
	overflow: hidden;
	font-size: 14px;
}

.rbs-my-certificates .rbs-certificates-table th{
	background: #faf8f2;
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--rbs-muted);
	padding: 12px 14px;
	border-bottom: 2px solid var(--rbs-border);
}

.rbs-my-certificates .rbs-certificates-table td{
	padding: 12px 14px;
	border-bottom: 1px solid var(--rbs-border);
}

.rbs-my-certificates .rbs-certificates-table tr:last-child td{
	border-bottom: none;
}

.rbs-my-certificates .rbs-certificates-table a{
	color: var(--rbs-gold-dark);
	font-weight: 700;
	text-decoration: none;
}

.rbs-my-certificates .rbs-certificates-table a:hover{
	text-decoration: underline;
}

/* ---------- Affiliate Marketplace course cards ---------- */
/* No CSS existed for these at all before — each thumbnail rendered at
   its own image's natural size, so cards of different heights sat
   side by side depending on what each instructor uploaded. Fixed
   aspect-ratio + object-fit keeps every card the same shape
   regardless of the source image's actual dimensions. */
.rbs-aff-course-card{
	background: #fff;
	border: 1px solid var(--rbs-border);
	border-radius: var(--rbs-card-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 10px rgba(20,20,20,.05);
}

.rbs-aff-course-thumb{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f2efe6;
}

.rbs-aff-course-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rbs-aff-course-thumb-placeholder{
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, #e7e3d8, #f2efe6);
}

.rbs-aff-course-commission-badge{
	position: absolute;
	top: 10px;
	right: 10px;
	background: #0a7d3d;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
}

.rbs-aff-course-body{
	padding: 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.rbs-aff-course-category{
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rbs-gold-deep, #B4872D);
	margin-bottom: 6px;
}

.rbs-aff-course-title{
	font-size: 16px;
	font-weight: 800;
	line-height: 1.35;
	color: var(--rbs-black);
	margin: 0 0 6px;
	/* Clamp to 2 lines so a long title can't push every card to a
	   different height in the same row. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rbs-aff-course-instructor{
	font-size: 13px;
	color: var(--rbs-muted);
	margin: 0 0 10px;
}

/* The meta row (price / rating / student count) previously had NO
   CSS at all — each <span> rendered as an unstyled inline element
   that simply wrapped onto its own line once the card got narrow.
   Fixed as a single horizontal row with a smaller, consistent font
   size that fits on one line even on a narrow mobile card. */
.rbs-aff-course-meta{
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 10px;
	font-size: 12.5px;
	white-space: nowrap;
	overflow: hidden;
	margin-bottom: 10px;
}

.rbs-aff-course-price{
	font-weight: 800;
	color: var(--rbs-black);
	flex-shrink: 0;
}

.rbs-aff-course-rating,
.rbs-aff-course-students{
	color: var(--rbs-muted);
	font-weight: 600;
	flex-shrink: 0;
}

.rbs-aff-course-rating{
	color: #b4872d;
}

.rbs-aff-course-earn{
	font-size: 13px;
	color: var(--rbs-black);
	background: #f7f3e8;
	border: 1px solid rgba(220,173,96,.3);
	border-radius: 8px;
	padding: 8px 10px;
	margin-bottom: 12px;
}

.rbs-aff-course-actions{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
}

@media (max-width: 380px){
	.rbs-aff-course-meta{
		font-size: 11px;
		gap: 7px;
	}
}

/* ==========================================================================
   Learning Partners — directory + profile
   ========================================================================== */

.rbs-lp-directory{
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 16px 56px;
}

.rbs-lp-directory-header{
	text-align: center;
	margin-bottom: 24px;
}

.rbs-lp-directory-header h2,
.rbs-lp-directory-header h1{
	font-size: 28px;
	font-weight: 800;
	color: var(--rbs-black);
	margin-bottom: 6px;
}

.rbs-lp-directory-subtitle{
	color: var(--rbs-muted);
	font-size: 15px;
}

.rbs-lp-directory-filters{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--rbs-border);
	border-radius: var(--rbs-card-radius);
	padding: 16px 18px;
	margin-bottom: 28px;
}

.rbs-lp-directory-filters select,
.rbs-lp-directory-filters input[type="text"]{
	padding: 9px 12px;
	border: 1px solid var(--rbs-border);
	border-radius: 8px;
	font-size: 13px;
}

.rbs-lp-directory-filters button{
	padding: 9px 20px;
	background: var(--rbs-gold);
	color: var(--rbs-black);
	border: none;
	border-radius: 8px;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
}

.rbs-lp-directory-empty{
	text-align: center;
	color: var(--rbs-muted);
	padding: 40px 0;
}

.rbs-lp-directory-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

/* ---------- Card ---------- */
.rbs-lp-card{
	background: #fff;
	border: 1px solid var(--rbs-border);
	border-radius: var(--rbs-card-radius);
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(20,20,20,.05);
	display: flex;
	flex-direction: column;
}

.rbs-lp-card-cover{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: linear-gradient(145deg, #16171a, #26282d);
	overflow: hidden;
}

.rbs-lp-card-cover img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rbs-lp-badge{
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 20px;
}

.rbs-lp-badge-featured{
	background: var(--rbs-gold);
	color: var(--rbs-black);
}

.rbs-lp-card-body{
	padding: 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
}

.rbs-lp-card-header{
	display: flex;
	align-items: center;
	gap: 12px;
}

.rbs-lp-card-header-text{
	min-width: 0;
	flex: 1;
}

.rbs-lp-card-logo{
	width: 44px;
	height: 44px;
	border-radius: 8px;
	object-fit: cover;
	border: 1px solid var(--rbs-border);
	flex-shrink: 0;
}

.rbs-lp-card-title{
	font-size: 16px;
	font-weight: 800;
	color: var(--rbs-black);
	margin: 0;
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}

.rbs-lp-verified-tick{
	color: #1a7f37;
	font-size: 13px;
	margin-left: 4px;
}

.rbs-lp-card-meta{
	display: block;
	font-size: 12px;
	color: var(--rbs-muted);
	margin-top: 2px;
}

.rbs-lp-card-desc{
	font-size: 13px;
	color: var(--rbs-ink);
	line-height: 1.5;
	margin: 0;
	flex: 1;
}

.rbs-lp-card-categories{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.rbs-lp-tag{
	background: #faf8f2;
	border: 1px solid var(--rbs-border);
	color: var(--rbs-gold-dark);
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 20px;
}

.rbs-lp-card-actions{
	margin-top: 6px;
}

.rbs-lp-view-btn{
	display: block;
	text-align: center;
	padding: 10px;
	background: var(--rbs-black);
	color: #fff !important;
	border-radius: 8px;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
}

.rbs-lp-view-btn:hover{
	opacity: .9;
}

/* ---------- Learning Partner application form ---------- */
.rbs-lp-application{
	max-width: 680px;
	margin: 0 auto 56px;
	padding: 0 16px;
}

.rbs-lp-application-success{
	background: #eef9f0;
	border: 1px solid #b7e0c0;
	color: #0a4d26;
	padding: 20px;
	border-radius: var(--rbs-card-radius);
	font-weight: 600;
}

.rbs-lp-application-intro{
	color: var(--rbs-muted);
	margin-bottom: 20px;
}

.rbs-lp-form{
	background: #fff;
	border: 1px solid var(--rbs-border);
	border-radius: var(--rbs-card-radius);
	padding: 26px;
}

.rbs-lp-form label{
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: var(--rbs-black);
	margin: 16px 0 6px;
}

.rbs-lp-form h4{
	margin-top: 24px;
	color: var(--rbs-black);
}

.rbs-lp-form .description{
	color: var(--rbs-muted);
	font-size: 13px;
	margin-bottom: 6px;
}

.rbs-lp-form input[type="text"],
.rbs-lp-form input[type="url"],
.rbs-lp-form input[type="email"],
.rbs-lp-form select,
.rbs-lp-form textarea{
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--rbs-border);
	border-radius: 8px;
	font-size: 14px;
	box-sizing: border-box;
}

.rbs-lp-checkbox{
	display: flex !important;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400 !important;
	font-size: 14px;
}

.rbs-lp-submit-btn{
	margin-top: 24px;
	width: 100%;
	padding: 13px;
	background: var(--rbs-gold);
	color: var(--rbs-black);
	border: none;
	border-radius: 8px;
	font-weight: 800;
	font-size: 15px;
	cursor: pointer;
}

.rbs-lp-submit-btn:hover{
	opacity: .9;
}

/* ---------- Notifications ([rbs_notifications] + dashboard tabs) ---------- */
.rbs-notifications-list{
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rbs-notification-item{
	background: #fff;
	border: 1px solid var(--rbs-border);
	border-left: 4px solid var(--rbs-border);
	border-radius: 10px;
	padding: 14px 18px;
}

.rbs-notification-item.rbs-notification-unread{
	border-left-color: var(--rbs-gold);
	background: #fffdf6;
}

.rbs-notification-item.rbs-notification-admin{
	border-left-color: var(--rbs-black);
}

.rbs-notification-type{
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--rbs-gold-dark);
	margin-bottom: 6px;
}

.rbs-notification-item.rbs-notification-admin .rbs-notification-type{
	color: var(--rbs-black);
}

.rbs-notification-message{
	margin: 0 0 6px;
	font-size: 14px;
	color: var(--rbs-ink);
	line-height: 1.5;
}

.rbs-notification-date{
	font-size: 12px;
	color: var(--rbs-muted);
}

/* ---------- Table wrapper: let the SCROLLBAR live on the card, not
   just the table inside it ---------- */
/* The rounded .rbs-premium-card wrapper around a table (e.g. the
   Withdrawal History section) had no overflow handling of its own —
   only the table element itself did. On a container that's already
   narrower than the table's natural content width, the wrapper's own
   boundary was what visitors actually hit first, cutting the
   scrollable area short before it ever reached the table's own
   overflow-x. Applied at all widths (not just the mobile breakpoint
   below), since the constraint is the wrapper's width, not the
   viewport size. */
.rbs-aff-history-section,
.rbs-premium-card:has(table){
	overflow-x: auto;
	width: 100%;
	-webkit-overflow-scrolling: touch;
}

.rbs-aff-history-section table,
.rbs-premium-card:has(table) table{
	min-width: 640px;
}

/* ---------- Mobile: scroll tables horizontally instead of squishing every cell ---------- */
/* Pure CSS, no markup changes needed. IMPORTANT: does NOT override the
   display of thead/tbody/tr — an earlier version did (splitting them
   into independent display:table contexts), which broke the header
   row's columns lining up with the data rows' columns once scrolled,
   since each ended up computing its own column widths separately
   instead of sharing one unified table layout. This version keeps the
   table as a single real table (overflow-x works directly on a table
   element in every modern browser) and only forces cells not to wrap,
   which is what actually makes the table wider than its container and
   triggers the scrollbar — column widths stay computed together
   across the whole table, so header and data always line up. */
@media (max-width: 782px){
	body .rbs-affiliate-table,
	body .rbs-aff-table,
	body .rbs-premium-table,
	body .rbs-certificates-table,
	body .rbs-certificate-verify-details,
	body .rbs-dashboard-page .rbs-table,
	body .rbs-dashboard-page .tutor-table{
		display: table !important;
		width: 100% !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}

	body .rbs-affiliate-table,
	body .rbs-aff-table,
	body .rbs-premium-table,
	body .rbs-certificates-table,
	body .rbs-dashboard-page .rbs-table,
	body .rbs-dashboard-page .tutor-table{
		border-collapse: collapse !important;
	}

	body .rbs-affiliate-table th,
	body .rbs-aff-table th,
	body .rbs-premium-table th,
	body .rbs-certificates-table th,
	body .rbs-dashboard-page .rbs-table th,
	body .rbs-dashboard-page .tutor-table th,
	body .rbs-affiliate-table td,
	body .rbs-aff-table td,
	body .rbs-premium-table td,
	body .rbs-certificates-table td,
	body .rbs-dashboard-page .rbs-table td,
	body .rbs-dashboard-page .tutor-table td{
		white-space: nowrap !important;
	}
}

/* ---------- Live bank account name preview (withdrawal forms) ---------- */
.rbs-account-name-preview{
	font-size: 13px;
	font-weight: 700;
	padding: 8px 12px;
	border-radius: 8px;
	margin: -6px 0 12px;
	background: #f4f4f4;
	color: var(--rbs-muted);
}

.rbs-account-name-preview-success{
	background: #eef9f0;
	color: #0a4d26;
}

.rbs-account-name-preview-error{
	background: #fff5f5;
	color: #8a1f1f;
}

/* ===== Featured Courses (product-card carousel, peek + both arrows) ===== */
.rbs-featured-courses-wrap {
	position: relative;
	display: flex !important;
	align-items: flex-start;
	width: 100% !important;
	max-width: none !important;
	margin: 0 auto;
	padding: 32px 24px;
	gap: 8px;
	background: #ffffff !important;
	box-sizing: border-box;
}

.rbs-featured-courses {
	display: flex !important;
	flex-wrap: nowrap;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	flex: 1 1 auto !important;
	width: 100% !important;
	padding: 4px 2px;
	box-sizing: border-box;
}

.rbs-featured-courses::-webkit-scrollbar {
	display: none;
}

.rbs-fc-item {
	flex: 0 0 auto;
	width: 230px;
	scroll-snap-align: start;
	display: flex !important;
	flex-direction: column !important;
	box-sizing: border-box;
}

.rbs-fc-thumb-link,
.rbs-fc-title-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.rbs-fc-thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	overflow: hidden;
	background: #f4f4f4;
	margin-bottom: 12px;
}

.rbs-fc-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rbs-fc-thumb-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.4rem;
}

.rbs-fc-sale-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #DCAD60;
	color: #141105;
	font-weight: 700;
	font-size: 13px;
	padding: 8px 16px;
	border-radius: 999px;
}

.rbs-fc-title {
	font-size: 15px;
	font-weight: 700 !important;
	line-height: 1.4;
	color: #141105 !important;
	margin-bottom: 8px;
	min-height: 42px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rbs-fc-price {
	font-size: 15px;
	margin-bottom: 14px;
}

.rbs-fc-price-was {
	text-decoration: line-through;
	color: #141105 !important;
	font-weight: 700 !important;
	margin-right: 8px;
}

.rbs-fc-price-now {
	color: #B8952E;
	font-weight: 700;
}

.rbs-fc-enroll-btn {
	display: inline-block;
	background: #DCAD60;
	color: #141105 !important;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 22px;
	border-radius: 8px;
	text-decoration: none;
	text-align: center;
	margin-top: auto !important;
	transition: opacity 0.15s ease;
}

.rbs-fc-enroll-btn:hover {
	opacity: 0.88;
}

.rbs-fc-arrow {
	flex-shrink: 0;
	align-self: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(20,17,5,0.18);
	background: #ffffff;
	color: #141105;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
}

.rbs-fc-arrow:hover {
	background: #DCAD60;
	color: #141105;
	border-color: #DCAD60;
}

@media (max-width: 767px) {

	.rbs-fc-item {
		width: 62% !important;
		flex: 0 0 auto !important;
	}

	.rbs-fc-arrow {
		display: flex !important;
		position: absolute;
		top: 38%;
		z-index: 2;
		box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	}

	.rbs-fc-arrow-prev {
		left: 6px;
	}

	.rbs-fc-arrow-next {
		right: 6px;
	}

	.rbs-featured-courses-wrap {
		gap: 0;
	}
}

/* Desktop: all courses stretch to fill the section edge-to-edge,
   evenly sized, in one static row — no scrolling needed here, so
   the arrows (which exist for the mobile slide-through-then-handoff
   behavior) are hidden rather than left with nothing to do.
   !important throughout this block because the theme's own CSS has
   repeatedly overridden unforced rules on this site. */
@media (min-width: 768px) {

	.rbs-featured-courses {
		overflow-x: visible !important;
	}

	.rbs-fc-item {
		width: auto !important;
		flex: 1 1 0 !important;
		min-width: 0 !important;
	}

	.rbs-fc-arrow {
		display: flex !important;
		background: #DCAD60 !important;
		color: #141105 !important;
		border-color: #DCAD60 !important;
	}
}