/* ==========================================================================
   Biohack Therapeutics — affiliate signup + dashboard page (page 67).
   Shared tokens/header/buttons/footer live in base.css (enqueued alongside
   this — see functions.php). This restyles the Coupon Affiliates plugin's
   registration form, login form, and seller dashboard by targeting its
   real class names (confirmed by fetching the actual rendered markup,
   logged out and logged in as a test affiliate) — structure/functionality
   untouched. Button/table/tab colors are set via the plugin's own color
   settings (wcusage_field_color_*), not CSS overrides, since it generates
   those as high-specificity inline !important styles per-request.
   ========================================================================== */

.affiliate-page {
	padding: 48px 0 96px;
}

.affiliate-page__eyebrow {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--teal-deep);
	margin-bottom: 10px;
}

.affiliate-page__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.08em;
	margin-bottom: 10px;
}

.affiliate-page__subtitle {
	color: var(--text-muted);
	font-size: 1rem;
	max-width: 46em;
	margin-bottom: 40px;
}

/* Compact summary of the affiliate terms, shown above the registration
   form/dashboard — a pointer to the full terms page, not a replacement
   for it, so kept short and scannable rather than styled like a card of
   legal text. */
.affiliate-key-terms {
	max-width: 720px;
	background-color: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	padding: 20px 24px;
	margin-bottom: 32px;
}

.affiliate-key-terms__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 400;
	font-size: 1rem;
	color: var(--text);
	margin: 0 0 12px;
}

.affiliate-key-terms__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.affiliate-key-terms__list li {
	position: relative;
	padding-left: 18px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--text);
}

.affiliate-key-terms__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--teal);
}

.affiliate-key-terms__list a {
	color: var(--teal-deep);
	text-decoration: underline;
}

@media (max-width: 480px) {
	.affiliate-key-terms {
		padding: 16px 18px;
	}
}

.affiliate-page__content {
	font-family: var(--font);
	color: var(--text);
	max-width: 720px;
}

.affiliate-page__content h2,
.affiliate-page__content h3,
.affiliate-page__content h4 {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 400;
	color: var(--text);
}

.affiliate-page__content p {
	line-height: 1.6;
}

/* Registration + login card */
.wcu-form-section,
.login-registration-container,
.wcusage-login-form-section {
	background-color: var(--bg-card);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 32px;
	margin-bottom: 28px;
}

/* .wcusage-login-form-cols is the vendor's own logged-out login/register
   pairing — plain float: left on each .wcusage-login-form-col, so the two
   cards (login, and a second register form) sit at their own natural
   heights with no equalization, staggering against the uniform full-width
   cards above them. Above the same 900px breakpoint the cards already
   switch padding at (where they're already confirmed to stack full width
   correctly on their own), replace the float pair with the same equal-
   height grid row technique .category-grid/.trust-bar use elsewhere
   (homepage.css): a fixed column count, default align-items (stretch) so
   both columns match the taller one's height. The visible card — the
   background/shadow/padding box from the shared rule above — lives one
   level deeper than the column itself (.wcusage-login-form-col > .wcu-
   form-section), so that inner box also needs height: 100% to actually
   fill the stretched column; a bare stretched wrapper alone would leave
   the white card boxes still short. Content inside each card is a plain
   top-flowing block already, so stretching the box doesn't recenter it. */
@media (min-width: 901px) {
	.wcusage-login-form-cols {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}

	.wcusage-login-form-col {
		float: none;
		/* The vendor's own float-era CSS gives this a percentage width meant
		   to resolve against the old single-width parent; as a grid item it
		   instead resolves against this column's own (already-halved) track,
		   compounding into a much narrower card. Force it to fill the track. */
		width: 100% !important;
	}

	.wcusage-login-form-col > .wcu-form-section {
		height: 100%;
		width: 100% !important;
		box-sizing: border-box;
		margin-bottom: 0;
	}
}

.wcusage-register-form-title,
.wcusage-login-form-title {
	font-family: var(--font-display) !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 400 !important;
	font-size: 1.15rem !important;
	color: var(--text);
	margin-bottom: 20px !important;
}

.wcu-register-field-col,
.wcu-register-field-col-1,
.wcu-register-field-col-2,
.wcu-register-field-col-username,
.wcu-register-field-col-email,
.wcu-register-field-col-password {
	margin-bottom: 18px;
}

.wcu-form-section label,
.wcusage-login-form-section label,
.login-registration-container label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: 6px;
}

.wcu-form-section input.input-text,
.wcu-form-section input[type="text"],
.wcu-form-section input[type="email"],
.wcu-form-section input[type="password"],
.wcusage-login-form-section input.input-text,
.wcusage-login-form-section input[type="text"],
.wcusage-login-form-section input[type="password"],
.login-registration-container input.input-text,
.login-registration-container input[type="text"],
.login-registration-container input[type="password"] {
	width: 100% !important;
	max-width: 340px !important;
	height: 46px;
	padding: 0 16px;
	border-radius: var(--radius-pill) !important;
	border: 1.5px solid var(--border) !important;
	background-color: var(--bg) !important;
	font-family: var(--font);
	font-size: 0.92rem;
	color: var(--text);
	box-sizing: border-box;
}

.wcu-form-section input:focus,
.wcusage-login-form-section input:focus,
.login-registration-container input:focus {
	outline: none;
	border-color: var(--teal) !important;
}

.wcu-register-form-button,
.wcusage-login-form-section .form-row {
	margin-top: 10px;
}

#wcu-register-button,
.login-registration-container .woocommerce-form-login__submit,
.wcusage-login-form-col .woocommerce-button {
	border-radius: var(--radius-pill) !important;
	height: 46px !important;
	padding: 0 30px !important;
	font-family: var(--font) !important;
	font-weight: 600 !important;
	text-shadow: none !important;
	border: none !important;
	cursor: pointer;
	transition: transform 0.25s var(--ease-brand);
}

#wcu-register-button:hover,
.login-registration-container .woocommerce-form-login__submit:hover {
	transform: translateY(-2px);
}

/* Dashboard */
.wcu-dash-coupon-area {
	background-color: var(--bg-card);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 28px 32px;
}

.wcu-dash-coupon-area .coupon-title {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 400;
	font-size: 1.3rem;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--border);
	padding-bottom: 16px;
}

.wcu-dash-coupon-area .wcu-coupon-title {
	color: var(--teal-deep);
}

.wcusage-dash-username,
.wcusage-dash-logout a {
	font-family: var(--font) !important;
	font-size: 0.8rem !important;
	color: var(--text-muted) !important;
	text-transform: none;
	letter-spacing: normal;
}

.wcusage-dash-logout a:hover {
	color: var(--teal-deep) !important;
}

.wcutab {
	border-radius: var(--radius-pill);
	overflow: hidden;
	margin-bottom: 24px;
}

.wcutablinks {
	font-family: var(--font) !important;
	font-weight: 600 !important;
	border: none !important;
}

.wcu-save-settings-button.woocommerce-Button {
	border-radius: var(--radius-pill) !important;
	font-family: var(--font) !important;
	font-weight: 600 !important;
}

.wcusage-info-box {
	background-color: var(--bg-alt);
	border-radius: var(--radius-card);
	font-family: var(--font);
	color: var(--text-muted);
}

@media (max-width: 900px) {
	.affiliate-page {
		padding: 32px 0 64px;
	}

	.wcu-form-section,
	.wcu-dash-coupon-area,
	.login-registration-container,
	.wcusage-login-form-section {
		padding: 24px 20px;
	}
}

/* base.css resets all <a> to inherit color/no-underline, which makes the
   Affiliate Program Terms link inside the registration form's terms checkbox
   indistinguishable from plain text. Restore it as a visible link. */
.wcu-reg-terms a {
	color: var(--teal-deep);
	text-decoration: underline;
}