/* ===================================================
   Viable Affiliate Program
   /affiliate-dashboard/ and /affiliate-program/ on viablekratom.com

   Brand tokens are the literal values from Elementor kit 14. They are NOT
   referenced as var(--e-global-color-*) because those variables resolve to an
   empty string on these two pages, which would silently blank every colour.

     Primary   #222222   Secondary #FBF3F0   Text #666666   Accent #6C9F44
     Type      Jost (500 headings, 400 body)

   The program page currently renders in -apple-system rather than Jost, which
   is the main reason it reads as unstyled next to the rest of the site.
   =================================================== */

.vk-affiliate-dashboard .page-content,
.vk-affiliate-program .page-content {
	--vk-ink: #1c1c1c;
	/* #666 on the cream panel measured washed out and was hard to read.
	   #3d3d3d is 10.3:1 on cream and 11.4:1 on white. */
	--vk-body: #3d3d3d;
	--vk-accent: #6c9f44;
	--vk-accent-dark: #4a7130;
	--vk-accent-darker: #3a5926;
	--vk-cream: #fbf3f0;
	--vk-rule: #e4ddd9;
	--vk-font: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------
   Shared measure. 1140px is far too wide to read a
   contract at; 46rem is roughly 75 characters.
   --------------------------------------------------- */

.vk-affiliate-program .page-content,
.vk-affiliate-dashboard .page-content {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: clamp(3rem, 7vw, 5rem);
	font-family: var(--vk-font);
}

.vk-affiliate-program .page-content p,
.vk-affiliate-program .page-content li,
.vk-affiliate-dashboard .page-content p {
	font-family: var(--vk-font);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--vk-body);
}

/* ---------------------------------------------------
   Program at a glance panel
   --------------------------------------------------- */

/* The Elementor container this sits in centres its text, which centres every
   label and value inside the grid cells and makes the facts hard to scan.
   Reassert left alignment for the panel and everything in it. */
.vk-affiliate-glance,
.vk-affiliate-glance dt,
.vk-affiliate-glance dd,
.vk-affiliate-glance > p:not(.vk-affiliate-glance__actions) {
	text-align: left;
}

.vk-affiliate-glance {
	margin: 0 0 clamp(2rem, 5vw, 3rem);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	background: var(--vk-cream);
	border: 1px solid var(--vk-rule);
	border-left: 3px solid var(--vk-accent);
	border-radius: 10px;
}

.vk-affiliate-glance__eyebrow {
	margin: 0 0 0.5rem;
	font-family: var(--vk-font);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vk-accent-dark);
}

.vk-affiliate-glance__title {
	margin: 0 0 clamp(1.25rem, 3vw, 1.6rem);
	font-family: var(--vk-font);
	font-size: clamp(1.6rem, 3.5vw, 2.125rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--vk-ink);
}

.vk-affiliate-glance__facts {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--vk-rule);
}

.vk-affiliate-glance__fact {
	display: grid;
	grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
	gap: 0.35rem 1.5rem;
	align-items: baseline;
	padding: 1rem 0;
	border-bottom: 1px solid var(--vk-rule);
}

.vk-affiliate-glance__fact:last-child {
	border-bottom: 0;
}

/* Condensed label. Deliberately a bare label, not a chip. */
.vk-affiliate-glance__label {
	margin: 0;
	font-family: var(--vk-font);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vk-accent-dark);
}

.vk-affiliate-glance__value {
	margin: 0;
	font-family: var(--vk-font);
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--vk-body);
}

.vk-affiliate-glance__actions {
	margin: clamp(1.4rem, 3vw, 1.75rem) 0 0;
	text-align: center;
}

/* ---------------------------------------------------
   Buttons. The site's own buttons are Jost, uppercase,
   1px tracking, square corners, so these match that.
   --------------------------------------------------- */

/* The theme underlines links inside .page-content and colours them, and that
   rule (0,0,1,1) outranks a bare class. Left alone it renders the solid green
   button as dark green underlined text on green, which is what shipped in
   1.0.2. Match specificity and kill the decoration explicitly. */
.vk-affiliate-dashboard .page-content a.vk-affiliate-glance__cta,
.vk-affiliate-dashboard .page-content a.vk-affiliate-apply__cta,
.vk-affiliate-program .page-content a.vk-affiliate-glance__cta,
.vk-affiliate-program .page-content a.vk-affiliate-apply__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0.9rem 1.9rem;
	font-family: var(--vk-font);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none !important;
	border-bottom: 0 !important;
	border-radius: 4px;
	border: 2px solid var(--vk-accent);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vk-affiliate-program .page-content a.vk-affiliate-apply__cta,
.vk-affiliate-dashboard .page-content a.vk-affiliate-apply__cta {
	/* The brand green #6C9F44 gives white text only 3.14:1, which fails AA at
	   this size. The deeper shade of the same green is 5.68:1. */
	background: var(--vk-accent-dark);
	border-color: var(--vk-accent-dark);
	color: #ffffff !important;
}

.vk-affiliate-program .page-content a.vk-affiliate-apply__cta:hover,
.vk-affiliate-program .page-content a.vk-affiliate-apply__cta:focus,
.vk-affiliate-dashboard .page-content a.vk-affiliate-apply__cta:hover,
.vk-affiliate-dashboard .page-content a.vk-affiliate-apply__cta:focus {
	background: var(--vk-accent-darker);
	border-color: var(--vk-accent-darker);
	color: #ffffff !important;
}

.vk-affiliate-dashboard .page-content a.vk-affiliate-glance__cta,
.vk-affiliate-program .page-content a.vk-affiliate-glance__cta {
	background: #ffffff;
	color: var(--vk-accent-dark) !important;
}

.vk-affiliate-dashboard .page-content a.vk-affiliate-glance__cta:hover,
.vk-affiliate-dashboard .page-content a.vk-affiliate-glance__cta:focus,
.vk-affiliate-program .page-content a.vk-affiliate-glance__cta:hover,
.vk-affiliate-program .page-content a.vk-affiliate-glance__cta:focus {
	background: var(--vk-accent-dark);
	border-color: var(--vk-accent-dark);
	color: #ffffff !important;
}

/* Dark ring on a light page, offset so it never sits on the green fill. */
.vk-affiliate-glance__cta:focus-visible,
.vk-affiliate-apply__cta:focus-visible {
	outline: 2px solid var(--vk-ink);
	outline-offset: 3px;
}

/* ---------------------------------------------------
   Apply bands on the terms page
   --------------------------------------------------- */

.vk-affiliate-apply {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	text-align: center;
}

.vk-affiliate-apply--top {
	margin: 0 0 clamp(2rem, 5vw, 2.75rem);
	padding-bottom: clamp(1.5rem, 4vw, 2rem);
	border-bottom: 1px solid var(--vk-rule);
}

.vk-affiliate-apply--bottom {
	margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
	padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
	background: var(--vk-cream);
	border: 1px solid var(--vk-rule);
	border-radius: 10px;
}

.vk-affiliate-apply__lead {
	margin: 0;
	font-family: var(--vk-font);
	font-size: clamp(1.35rem, 3vw, 1.6rem);
	font-weight: 500;
	line-height: 1.25;
	color: var(--vk-ink);
}

/* ---------------------------------------------------
   Terms page readability. Layout and colour only,
   not one word of copy is touched.
   --------------------------------------------------- */

.vk-affiliate-program .page-content h2 {
	margin: clamp(2.25rem, 5vw, 3rem) 0 1rem;
	font-family: var(--vk-font);
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--vk-ink);
}

.vk-affiliate-program .page-content h2::after {
	content: "";
	display: block;
	width: 3rem;
	height: 2px;
	margin-top: 0.8rem;
	background: var(--vk-accent);
}

.vk-affiliate-program .page-content ol,
.vk-affiliate-program .page-content ul {
	margin: 0 0 1.5rem;
	padding-left: 1.5rem;
}

.vk-affiliate-program .page-content li {
	margin: 0 0 0.85rem;
	padding-left: 0.25rem;
}

.vk-affiliate-program .page-content li::marker {
	color: var(--vk-accent-dark);
	font-weight: 600;
}

/* Body links only. Never the CTAs, which are buttons. */
.vk-affiliate-program .page-content a:not([class*="vk-affiliate"]) {
	color: var(--vk-accent-dark);
	text-underline-offset: 2px;
}

/* ---------------------------------------------------
   YITH signup form
   --------------------------------------------------- */

.vk-affiliate-dashboard .register-title {
	margin: 0 0 1rem;
	font-family: var(--vk-font);
	font-size: clamp(1.35rem, 3vw, 1.6rem);
	font-weight: 500;
	color: var(--vk-ink);
}

.vk-affiliate-dashboard .register-form,
.vk-affiliate-dashboard .become-an-affiliate-form {
	background: #ffffff !important;
	border: 1px solid var(--vk-rule) !important;
	border-radius: 10px !important;
	padding: clamp(1.5rem, 4vw, 2rem) !important;
}

.vk-affiliate-dashboard form.register,
.vk-affiliate-dashboard form.become-an-affiliate {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.vk-affiliate-dashboard .page-content .form-row label {
	display: block;
	margin: 0 0 0.35rem;
	font-family: var(--vk-font);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--vk-ink);
}

.vk-affiliate-dashboard .page-content input.input-text,
.vk-affiliate-dashboard .page-content textarea.input-text,
.vk-affiliate-dashboard .page-content select {
	width: 100%;
	padding: 0.75rem 0.9rem;
	min-height: 44px;
	border: 1px solid #d6d6d6 !important;
	border-radius: 6px !important;
	background: #ffffff !important;
	color: var(--vk-ink) !important;
	font-family: var(--vk-font);
	/* iOS Safari zooms the page when a focused field is under 16px. */
	font-size: 1rem !important;
	line-height: 1.4;
}

.vk-affiliate-dashboard .page-content input.input-text:focus,
.vk-affiliate-dashboard .page-content textarea.input-text:focus,
.vk-affiliate-dashboard .page-content select:focus {
	outline: none;
	border-color: var(--vk-accent) !important;
	box-shadow: 0 0 0 2px rgba(108, 159, 68, 0.18);
}

.vk-affiliate-dashboard .page-content .terms-label label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.35rem 0;
	font-family: var(--vk-font);
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5;
	color: var(--vk-body);
	cursor: pointer;
}

/* Shipped at 13px, on a control that is required to submit. */
.vk-affiliate-dashboard .page-content .terms-label input.input-checkbox {
	width: 24px;
	height: 24px;
	min-height: 24px;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--vk-accent);
	cursor: pointer;
}

.vk-affiliate-dashboard .page-content input.button[name="register"],
.vk-affiliate-dashboard .page-content input.button[name="become-an-affiliate"],
.vk-affiliate-dashboard .page-content button.button {
	width: 100%;
	min-height: 48px !important;
	background: var(--vk-accent) !important;
	border: 1px solid var(--vk-accent) !important;
	border-radius: 4px !important;
	color: #ffffff !important;
	font-family: var(--vk-font);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The only free-text field in the application is "Specify how you will promote
   our site", and the plugin hides it unless the promote select is "Others".
   That makes "ask for a coupon code in your application" impossible for the
   other three audience types. It stays optional either way. */
.vk-affiliate-dashboard #profile_custom_promote_field {
	display: block !important;
}

/* ---------------------------------------------------
   Mobile
   --------------------------------------------------- */

@media (max-width: 600px) {
	.vk-affiliate-glance {
		padding: 1.25rem 1.15rem;
	}

	.vk-affiliate-glance__fact {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.25rem;
		padding: 0.75rem 0;
	}

	.vk-affiliate-apply--bottom {
		padding: 1.5rem 1.15rem;
	}

	.vk-affiliate-glance__cta,
	.vk-affiliate-apply__cta {
		width: 100%;
	}

	.vk-affiliate-program .page-content ol,
	.vk-affiliate-program .page-content ul {
		padding-left: 1.25rem;
	}
}