/*
 * Deliberately plain. This box can appear on any page of any theme, so it uses one neutral frame
 * and inherits the theme's font rather than fighting it with brand colours it cannot match.
 *
 * The button is the exception, and it uses !important on purpose. A theme's own button rule is
 * specific enough to win on colour - and did: the background applied while the text colour did not,
 * so the button rendered dark-on-dark and looked like a solid black bar. A payment button that
 * cannot be read is worse than an ugly one, so the colours are stated rather than requested.
 */

.jbsp-subs {
	max-width: 34em;
	padding: 1.25em 1.5em;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	background: #fff;
	color: #1d2327;
	font-size: 1rem;
	line-height: 1.5;
	box-sizing: border-box;
}

.jbsp-subs *,
.jbsp-subs *::before,
.jbsp-subs *::after {
	box-sizing: border-box;
}

.jbsp-subs--active {
	border-color: #2f7d32;
}

.jbsp-subs__status {
	margin: 0 0 0.75em;
	font-weight: 600;
}

.jbsp-subs--active .jbsp-subs__status {
	color: #1e5b21;
}

.jbsp-subs .jbsp-subs__button {
	display: inline-block;
	width: 100%;
	padding: 0.75em 1.25em;
	border: 0;
	border-radius: 6px;
	background: #1e9e4a !important;
	color: #fff !important;
	text-shadow: none !important;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
}

.jbsp-subs .jbsp-subs__button:hover:not(:disabled) {
	background: #17833d !important;
	color: #fff !important;
}

.jbsp-subs .jbsp-subs__button:focus-visible {
	outline: 2px solid #14532d;
	outline-offset: 2px;
}

.jbsp-subs .jbsp-subs__button:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Secondary: "stop renewing", and the option to pay when Pro came from somewhere else. */
.jbsp-subs .jbsp-subs__button--quiet,
.jbsp-subs .jbsp-subs__button--quiet:hover:not(:disabled) {
	width: auto;
	background: transparent !important;
	border: 1px solid rgba(0, 0, 0, 0.25) !important;
	color: #1d2327 !important;
}

.jbsp-subs .jbsp-subs__button--quiet:hover:not(:disabled) {
	background: rgba(0, 0, 0, 0.05) !important;
}

.jbsp-subs__fine {
	margin: 0.75em 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	opacity: 0.75;
}

.jbsp-subs__message {
	margin: 0 0 0.75em;
	padding: 0.6em 0.75em;
	border-left: 3px solid #2271b1;
	background: rgba(34, 113, 177, 0.07);
	font-size: 0.875rem;
}

.jbsp-subs__message--error {
	border-left-color: #b32d2e;
	background: rgba(179, 45, 46, 0.07);
}


/* The coupon control: a quiet, clearly secondary line under the subscription state. */
.jbsp-subs__coupon {
	margin-top: 1em;
	padding-top: 0.9em;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.jbsp-subs__coupon-label {
	display: block;
	margin-bottom: 0.4em;
	font-size: 0.9em;
	font-weight: 600;
}

.jbsp-subs__coupon-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	align-items: center;
}

.jbsp-subs__coupon-input {
	flex: 1 1 12em;
	min-width: 0;
	padding: 0.5em 0.65em;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 4px;
	font-family: inherit;
	font-size: 0.95em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.jbsp-subs__coupon .jbsp-subs__button {
	margin: 0;
	white-space: nowrap;
}

.jbsp-subs__coupon-form {
	margin: 0;
}

/* The All My Links tab: a state line, the date the linked subscription is paid to, and the way out.
   Deliberately small - the tab sits inside somebody else's dashboard panel and inherits its type. */
.jbsp-aml__status--linked {
	color: #1e5b21;
	font-weight: 600;
}

.jbsp-aml__meta {
	margin: 0.25em 0 0.75em;
}

.jbsp-aml__manage {
	margin: 0.5em 0 0;
}
/* The full shortcode: the panel, then the explainer below it. */
.jbsp-aml--full .jbsp-aml {
	margin-bottom: 1.25em;
}

/* The Discord box: same shape as the subscription box, quiet by default. */
.jbsp-discord {
	max-width: 34em;
	padding: 1.25em 1.5em;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	background: #fff;
	color: #1d2327;
}

.jbsp-discord h3 {
	margin: 0 0 0.5em;
	font-size: 1.05em;
}

.jbsp-discord__status {
	margin: 0 0 0.5em;
	font-weight: 600;
}

.jbsp-discord__fine {
	margin: 0.5em 0 0;
	font-size: 0.9em;
	color: #50575e;
}

.jbsp-discord__notice {
	margin: 0 0 0.75em;
	padding: 0.6em 0.75em;
	border-left: 3px solid #2271b1;
	background: #f0f6fc;
}
/* BrandProtector is the same panel with its own prefix; the two never share a cache or a secret, so
   they get their own selectors rather than a shared class that would blur which one is being read. */
/* Same shape as the AllMyLinks panel on purpose: these are two tabs of one dashboard, and a bordered
   box here would have been a box inside the section's own card. Only the inner elements differ. */
.jbsp-bp__status--linked {
	color: #1e5b21;
	font-weight: 600;
}

.jbsp-bp__about {
	margin: 0 0 0.9em;
	line-height: 1.55;
}

/* Green on black, which is BrandProtector's own pair - the AllMyLinks copy of this button is orange. */
.jbsp-bp__visit {
	display: inline-block;
	padding: 11px 20px;
	border-radius: 8px;
	background: #22c55e;
	color: #0b0b0b;
	font-weight: 700;
	text-decoration: none;
}

.jbsp-bp__visit:hover,
.jbsp-bp__visit:focus {
	background: #16a34a;
	color: #0b0b0b;
	text-decoration: none;
}

.jbsp-bp__meta {
	margin: 0.25em 0 0.75em;
}

.jbsp-bp__manage {
	margin: 0.5em 0 0;
}