/* Affiliate panel (/affiliate-panel/) — scoped overrides for the AffiliatePress
   login / forgot-password / register card and the logged-in dashboard shell.
   Design language matches page-affiliate-signup.css so both halves of the
   affiliate flow look like one product. */

/* ---------------------------------------------------------------------------
   1. Repair the AffiliatePress colour tokens.

   The plugin's background colour setting is saved as #185EA0, so it emits
   --ap-front-cl-white: #185EA0 on :root. That token is a *surface* colour —
   it paints the card, every input fill, dropdowns and menu panels — which is
   why the login box and its fields render solid blue.

   --el-fill-color-blank is emitted malformed by the plugin (missing colon:
   `--el-fill-color-blank#185EA0`), so Element Plus surfaces get no fill at all.

   Fixing the tokens here corrects the logged-in dashboard too, not just login.
   The permanent fix is to reset the colour in AffiliatePress → Settings.
--------------------------------------------------------------------------- */
.bb-aff-panel-page {
	--ap-front-cl-white: #fff;
	--el-fill-color-blank: #fff;
	--ap-panel-sidebar-color: #fff;
	--ap-front-title-color: #1e1e1e;
	--ap-heading-color: #1e1e1e;
	--ap-front-content-color: #69727d;
	--ap-content-color: #69727d;
	--ap-placeholder-color: #929db4;
	--ap-front-border-color: #d5d8dc;
	--el-text-color: #1e1e1e;
}

/* ---------------------------------------------------------------------------
   2. Page shell
--------------------------------------------------------------------------- */
.bb-aff-panel-page .site-content {
	background-color: #f4f5f7;
	padding-top: 0;
}

.bb-aff-panel-page .shoptimizer-archive {
	margin-bottom: 0;
}

.bb-aff-panel-page .archive-header,
.bb-aff-panel-page .woocommerce-breadcrumb {
	display: none;
}

.bb-aff-panel-page .entry-header {
	padding-top: 40px;
	margin-bottom: 0;
	text-align: center;
}

.bb-aff-panel-page .entry-header .entry-title {
	font-family: Roboto, sans-serif;
	font-size: clamp(26px, 3.5vw, 34px);
	font-weight: 600;
	color: #1e1e1e;
	letter-spacing: -0.02em;
	margin: 0;
}

/* The page inherits the theme's right-sidebar layout, which narrows #primary to
   ~70% and pushes the centred card off the page's optical centre. The panel has
   no use for a sidebar, so drop it and let the content column run full width. */
.bb-aff-panel-page #secondary.widget-area {
	display: none !important;
}

.bb-aff-panel-page #primary.content-area {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.bb-aff-panel-page .ap-front-reg-container {
	margin-top: 0 !important;
	min-height: 0 !important;
	padding-bottom: 72px;
}

.bb-aff-panel-page .ap-vue-main-front-container {
	min-height: 0 !important;
}

/* ---------------------------------------------------------------------------
   3. The auth card — centred, white, on the grey page
--------------------------------------------------------------------------- */
.bb-aff-panel-page .ap-main-reg-card-container {
	background-color: #fff !important;
	border: 1px solid #e8e8e8 !important;
	border-radius: 16px !important;
	box-shadow: 0 8px 32px rgba(30, 30, 30, 0.06);
	width: 100% !important;
	max-width: 560px !important;
	margin: 40px auto 0 !important;
	padding: 44px 44px 36px !important;
	min-height: 0 !important;
	font-family: Roboto, sans-serif;
}

/* Forgot-password view is shorter — keep it from collapsing awkwardly */
.bb-aff-panel-page .ap-main-forgot-password-container {
	min-height: 0 !important;
}

.bb-aff-panel-page .ap-front-page-title {
	font-family: Roboto, sans-serif !important;
	font-size: clamp(22px, 3vw, 26px) !important;
	font-weight: 600 !important;
	color: #1e1e1e !important;
	letter-spacing: -0.02em;
}

.bb-aff-panel-page .ap-front-page-sub-title {
	font-family: Roboto, sans-serif !important;
	font-size: 15px !important;
	color: #7a7a7a !important;
	line-height: 1.6;
}

.bb-aff-panel-page .ap-single-form .ap-front-page-sub-title {
	margin-bottom: 32px !important;
}

/* ---------------------------------------------------------------------------
   4. Fields
--------------------------------------------------------------------------- */
.bb-aff-panel-page .ap-main-reg-frm-body.ap-single-form .ap-form-label,
.bb-aff-panel-page .ap-main-reg-frm-body .el-form-item__label {
	color: #1e1e1e !important;
	font-family: Roboto, sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}

.bb-aff-panel-page .ap-single-field__form {
	margin-top: 18px !important;
}

/* Element Plus paints the wrapper; the child theme paints the inner input.
   Both need resetting or the blue token bleeds back through. */
.bb-aff-panel-page .ap-single-field__form .el-input__wrapper {
	background-color: #fff !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.bb-aff-panel-page .ap-single-field__form input.el-input__inner {
	background-color: #fff !important;
	border: 1px solid #d5d8dc !important;
	border-radius: 6px !important;
	color: #1e1e1e !important;
	font-family: Roboto, sans-serif !important;
	font-size: 15px !important;
	height: 44px !important;
	line-height: 44px !important;
	padding: 0 14px !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bb-aff-panel-page .ap-single-field__form input.el-input__inner::placeholder {
	color: #929db4 !important;
}

.bb-aff-panel-page .el-input__wrapper:hover input.el-input__inner {
	background-color: #fff !important;
	border-color: #185ea0 !important;
}

.bb-aff-panel-page .el-input__wrapper.is-focus input.el-input__inner,
.bb-aff-panel-page .ap-single-field__form input.el-input__inner:focus {
	border-color: #185ea0 !important;
	box-shadow: 0 0 0 3px rgba(24, 94, 160, 0.12) !important;
}

/* Show/hide password eye sits inside the padded input */
.bb-aff-panel-page .ap-single-field__form .el-input__suffix {
	position: absolute;
	right: 12px;
	top: 0;
	height: 44px;
	color: #929db4;
}

.bb-aff-panel-page .ap-single-field__form .el-input {
	position: relative;
}

.bb-aff-panel-page .ap-single-field__form input[type="password"].el-input__inner,
.bb-aff-panel-page .ap-single-field__form .el-input--suffix input.el-input__inner {
	padding-right: 40px !important;
}

.bb-aff-panel-page .el-form-item__error {
	color: #c62828 !important;
	font-family: Roboto, sans-serif !important;
	font-size: 13px !important;
	padding-top: 4px;
}

/* ---------------------------------------------------------------------------
   5. Remember me / forgot password row
--------------------------------------------------------------------------- */
.bb-aff-panel-page .ap-disp-flex-box {
	margin-top: 4px;
}

.bb-aff-panel-page .el-checkbox__inner {
	background-color: #fff !important;
	border-color: #d5d8dc !important;
	border-radius: 5px !important;
}

.bb-aff-panel-page .el-checkbox__input.is-checked .el-checkbox__inner {
	background-color: #185ea0 !important;
	border-color: #185ea0 !important;
}

.bb-aff-panel-page .ap-custom-checkbox--is-label .el-checkbox__label,
.bb-aff-panel-page .ap-custom-checkbox--is-label .el-checkbox__label div {
	color: #69727d !important;
	font-family: Roboto, sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
}

.bb-aff-panel-page .ap-acnt-link,
.bb-aff-panel-page .ap-acnt-link.ap-title-text-color {
	color: #185ea0 !important;
	font-family: Roboto, sans-serif !important;
	font-weight: 600 !important;
	font-size: 14px !important;
}

.bb-aff-panel-page .ap-acnt-link:hover,
.bb-aff-panel-page .ap-acnt-link:focus {
	color: #12497d !important;
}

/* ---------------------------------------------------------------------------
   6. Submit button + footer link
--------------------------------------------------------------------------- */
.bb-aff-panel-page .ap-single-form .ap-frm-btn {
	margin-top: 32px !important;
}

.bb-aff-panel-page .ap-btn--primary.el-button--primary {
	background-color: #202820 !important;
	border-color: #202820 !important;
	border-radius: 6px !important;
	font-family: Roboto, sans-serif !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	height: 52px !important;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bb-aff-panel-page .ap-btn--primary.el-button--primary:hover,
.bb-aff-panel-page .ap-btn--primary.el-button--primary:focus {
	background-color: #2d382d !important;
	border-color: #2d382d !important;
}

.bb-aff-panel-page .ap-btn--primary.el-button--primary .ap-btn__label {
	color: #fff !important;
}

.bb-aff-panel-page .ap-frm-account-link-upper {
	margin-top: 24px !important;
	font-family: Roboto, sans-serif !important;
	font-size: 14px !important;
	color: #69727d !important;
}

/* ---------------------------------------------------------------------------
   7. Toasts + loader
--------------------------------------------------------------------------- */
.bb-aff-panel-page .ap-front-toast-notification {
	width: 100% !important;
	margin-bottom: 16px;
	border-radius: 6px !important;
}

.bb-aff-panel-page .ap-front-toast-notification.--ap-error {
	border-left-color: #c62828 !important;
}

.bb-aff-panel-page .ap-front-toast-notification.--ap-success {
	border-left-color: #3bb54a !important;
}

.bb-aff-panel-page .ap-front-loader-container .ap-front-loader {
	background-size: 56px auto;
}

/* ---------------------------------------------------------------------------
   8. Logged-in dashboard shell — same token repair, light surface treatment
--------------------------------------------------------------------------- */
.bb-aff-panel-page .ap-affiliate-panel-sidebar,
.bb-aff-panel-page .ap-box-card,
.bb-aff-panel-page .ap-chart-data-card,
.bb-aff-panel-page .ap-panel-detail {
	background-color: #fff !important;
}

.bb-aff-panel-page .ap-affiliate-panel-container {
	font-family: Roboto, sans-serif;
}

/* ---------------------------------------------------------------------------
   9. Responsive
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.bb-aff-panel-page .entry-header {
		padding-top: 24px;
	}

	.bb-aff-panel-page .ap-main-reg-card-container {
		margin: 24px auto 0 !important;
		padding: 28px 20px 24px !important;
		border-radius: 12px !important;
	}

	.bb-aff-panel-page .ap-front-reg-container {
		padding-bottom: 48px;
	}

	.bb-aff-panel-page .ap-disp-flex-box {
		align-items: flex-start;
		gap: 12px;
	}

	.bb-aff-panel-page .ap-acnt-link-forgot {
		text-align: left;
	}
}