/* Fabrica Monetization Kit - Paywall Styles */

/* Note: shared.css is enqueued separately */

/* ============================================
   Fade preview into the paywall / regwall card

   The decorative layer sits above the card and is non-interactive. Themes can
   recolour the fade to match their body background via --fmk-paywall-fade-color
   (shared.css). Offset by 1px so the gradient's opaque end does not paint over
   .fmk-block's top border (pseudo-elements stack above the element border).
   ============================================ */
.fmk-paywall,
.fmk-regwall {
	position: relative;
}
.fmk-paywall::before, .fmk-regwall::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(100% + 1px);
		height: 5rem;
		background: linear-gradient(to bottom, transparent, var(--fmk-paywall-fade-color, #fff));
		pointer-events: none;
	}

/* ============================================
   Paywall Block
   ============================================ */
.fmk-paywall {

	/* Option buttons and the grid that holds them use shared styles
	   (.fmk-option-btn, .fmk-paywall__actions in shared.css) */

	/* Inline checkout uses shared .fmk-checkout styles (shared.css) */
}
.fmk-paywall__status {
		margin: 0 0 1rem 0;
		font-size: 0.875rem;
		color: var(--fmk-text-muted);
		text-align: center;
	}
.fmk-paywall__login-form {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.75rem;
		justify-content: center;
	}
.fmk-paywall__login-form input {
			flex: 1;
			min-width: 9.375rem;
			padding: 0.75rem;
			font-family: inherit;
			font-size: 1rem;
			border: 2px solid var(--fmk-border);
			border-radius: var(--fmk-radius-sm);
			box-sizing: border-box;
			transition: border-color 0.2s;
		}
.fmk-paywall__login-form input:focus {
				border-color: var(--fmk-primary);
				outline: none;
			}
/* Keyboard-only ring; the border tint alone is too weak a cue. */
.fmk-paywall__login-form input:focus-visible {
				outline: 2px solid var(--fmk-primary);
				outline-offset: 2px;
			}
.fmk-paywall__section {
		margin: 1.25rem 0;
	}
.fmk-paywall__section-title {
		margin: 0 0 0.75rem 0;
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--fmk-text-muted);
		text-transform: uppercase;
		letter-spacing: 0.5px;
		text-align: center;
	}

/* ============================================
   Registration Wall
   ============================================ */
.fmk-regwall__intro {
		margin: 0 0 1rem 0;
		font-size: 0.875rem;
		line-height: 1.5;
		color: var(--fmk-text-muted);
	}
.fmk-regwall__form-row {
		margin-bottom: 0.75rem;
	}
.fmk-regwall__form-row label {
			display: block;
			font-size: 0.8125rem;
			font-weight: 500;
			color: #333;
			margin-bottom: 0.375rem;
		}
.fmk-regwall__form-row input[type="email"],
		.fmk-regwall__form-row input[type="text"],
		.fmk-regwall__form-row input[type="password"] {
			width: 100%;
			padding: 0.75rem;
			font-family: inherit;
			font-size: 1rem;
			border: 2px solid var(--fmk-border);
			border-radius: var(--fmk-radius-sm);
			box-sizing: border-box;
			transition: border-color 0.2s;
		}
.fmk-regwall__form-row input[type="email"]:focus, .fmk-regwall__form-row input[type="text"]:focus, .fmk-regwall__form-row input[type="password"]:focus {
				border-color: var(--fmk-primary);
				outline: none;
			}
/* Keyboard-only ring; the border tint alone is too weak a cue. */
.fmk-regwall__form-row input[type="email"]:focus-visible, .fmk-regwall__form-row input[type="text"]:focus-visible, .fmk-regwall__form-row input[type="password"]:focus-visible {
				outline: 2px solid var(--fmk-primary);
				outline-offset: 2px;
			}
.fmk-regwall__form-row-group {
		display: flex;
		gap: 0.75rem;
		margin-bottom: 0.75rem;
	}
.fmk-regwall__form-row-group .fmk-regwall__form-row {
			flex: 1;
			margin-bottom: 0;
		}
.fmk-regwall__form .fmk-btn {
		display: block;
		margin-left: auto;
	}

/* ============================================
   Metering Counter
   ============================================ */
.fmk-metering-counter {
	padding: 0.625rem 1rem;
	margin-bottom: 1.25rem;
	font-size: 0.8125rem;
	color: var(--fmk-info-text, #004085);
	background: var(--fmk-info-bg, #e7f3ff);
	border: 1px solid var(--fmk-info-border, #b3d7ff);
	border-radius: var(--fmk-radius-sm);
	text-align: center;
}

/* ============================================
   Membership Block
   ============================================ */
.fmk-membership {

	/* Inline checkout uses shared .fmk-checkout styles (shared.css) */
}
/* Reuse paywall section layout */
.fmk-membership .fmk-paywall__section {
		margin: 0;
	}
.fmk-membership__success {
		text-align: center;
		padding: 1.875rem 1.25rem;
	}
.fmk-membership__success-icon {
		font-size: 3rem;
		line-height: 1;
		margin-bottom: 1rem;
		color: var(--fmk-success, #28a745);
	}
.fmk-membership__success-title {
		margin: 0 0 0.5rem 0;
		font-size: 1.25rem;
		font-weight: 600;
		color: var(--fmk-success, #28a745);
	}
.fmk-membership__success-message {
		margin: 0;
		font-size: 0.875rem;
		color: var(--fmk-text-muted, #666);
	}
.fmk-membership__success-link {
		margin-top: 1.25rem;
	}
.fmk-membership__member {
		text-align: center;
		padding: 0.5rem 0 0.25rem;
	}
.fmk-membership__member-icon {
		font-size: 2.25rem;
		line-height: 1;
		margin-bottom: 0.75rem;
		color: var(--fmk-success, #28a745);
	}
.fmk-membership__member-heading {
		margin: 0 0 0.375rem 0;
		font-size: 1.0625rem;
		font-weight: 600;
		color: var(--fmk-text);
	}
.fmk-membership__member-message {
		margin: 0 0 0.875rem 0;
		font-size: 0.875rem;
		color: var(--fmk-text-muted, #666);
	}

/* Accessible visually-hidden text (WP fallback) */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

/* ============================================
   Account Block/Shortcode
   ============================================ */
.fmk-account {
	display: flex;
	flex-direction: column;

	/* Specificity-governed muted styling for expired-item links; ascending
	   source order vs the list/reset link rules is unachievable. */
}
.fmk-account__login-form .fmk-account__field {
			margin-bottom: 1rem;
		}
.fmk-account__login-form .fmk-account__field label {
				display: block;
				font-size: 0.8125rem;
				font-weight: 500;
				color: #333;
				margin-bottom: 0.375rem;
			}
.fmk-account__login-form .fmk-account__field input {
				width: 100%;
				padding: 0.75rem;
				font-family: inherit;
				font-size: 1rem;
				border: 2px solid var(--fmk-border);
				border-radius: var(--fmk-radius-sm);
				box-sizing: border-box;
				transition: border-color 0.2s;
			}
.fmk-account__login-form .fmk-account__field input:focus {
					border-color: var(--fmk-primary);
					outline: none;
				}
/* Keyboard-only ring; the border tint alone is too weak a cue. */
.fmk-account__login-form .fmk-account__field input:focus-visible {
					outline: 2px solid var(--fmk-primary);
					outline-offset: 2px;
				}
.fmk-account__actions {
		margin-top: 1rem;
	}
.fmk-account__button {
		display: inline-block;
		padding: 0.875rem 1.5rem;
		font-family: inherit;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		background: var(--fmk-primary);
		color: #fff;
		border: none;
		border-radius: var(--fmk-radius-sm);
		cursor: pointer;
		transition: background-color 0.2s;
	}
.fmk-account__button:hover,
		.fmk-account__button:focus {
			background: var(--fmk-primary-hover);
			color: #fff;
		}
.fmk-account__button--primary {
			width: 100%;
		}
.fmk-account__button--secondary {
			background: transparent;
			color: var(--fmk-primary);
			border: 1px solid var(--fmk-primary);
			padding: 0.5rem 1rem;
			font-size: 0.875rem;
		}
.fmk-account__button--secondary:hover,
			.fmk-account__button--secondary:focus {
				background: var(--fmk-primary);
				color: #fff;
			}
.fmk-account__message {
		padding: 0.75rem 1rem;
		margin-top: 1rem;
		font-size: 0.875rem;
		background: #fff;
		border: 1px solid var(--fmk-border);
		border-radius: var(--fmk-radius-sm);
	}
.fmk-account__message[hidden] {
			display: none;
		}
.fmk-account__reset-link {
		margin-top: 1.25rem;
		text-align: center;
		font-size: 0.875rem;
	}
.fmk-account__reset-link a {
			color: var(--fmk-primary);
			text-decoration: none;
		}
.fmk-account__reset-link a:hover {
				text-decoration: underline;
			}
/* Logged in view */
.fmk-account__header {
		padding-bottom: 1rem;
	}
.fmk-account__user {
		margin: 0;
		font-size: 1rem;
		text-align: center;
		color: var(--fmk-text);
	}
.fmk-account__status {
		margin: 0 0 0.75rem 0;
		font-size: 0.875rem;
	}
.fmk-account__status--cancelling {
			color: var(--fmk-text-muted);
			font-style: italic;
		}
.fmk-account__status--warning {
			color: var(--fmk-warning, #b54708);
			font-weight: 600;
		}
.fmk-account__entitlements {
		margin-bottom: 1.25rem;
	}
.fmk-account__section-heading {
		margin: 0 0 0.75rem 0;
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--fmk-text);
	}
.fmk-account__list {
		margin: 0;
		padding: 0;
		list-style: none;
	}
.fmk-account__list li {
			padding: 0.25rem 0;
			font-size: 0.875rem;

			/* Cascade is specificity-governed; ascending source order is
			   unachievable here (reset-link a:hover specificity falls between
			   `list li a` and its nested `&:hover`). */
		}
/* stylelint-disable-next-line no-descending-specificity */
.fmk-account__list li a {
				color: var(--fmk-primary);
				text-decoration: none;
			}
.fmk-account__list li a:hover {
					text-decoration: underline;
				}
/* Active financial relationships + contributions ledger — share spacing */
.fmk-account__subscription,
	.fmk-account__memberships,
	.fmk-account__recurring-contributions,
	.fmk-account__contributions {
		padding-top: 1.25rem;
		margin-bottom: 1.25rem;
		border-top: 1px solid var(--fmk-border);
	}
.fmk-account__subscription > .fmk-account__button, .fmk-account__memberships > .fmk-account__button, .fmk-account__recurring-contributions > .fmk-account__button, .fmk-account__contributions > .fmk-account__button {
			margin-top: 0.75rem;
		}
/* Inline-row layout for both recurring + one-off contribution rows */
.fmk-account__memberships .fmk-account__list li,
	.fmk-account__subscription .fmk-account__list li,
	.fmk-account__recurring-contributions .fmk-account__list li,
	.fmk-account__contributions .fmk-account__list li {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.5rem;
		padding: 0.375rem 0;
	}
.fmk-account__contribution-amount {
		font-weight: 600;
		color: var(--fmk-success);
	}
.fmk-account__contribution-campaign {
		color: var(--fmk-text);
	}
.fmk-account__contribution-date {
		color: var(--fmk-text-muted);
		font-size: 0.8125rem;
	}
.fmk-account__contribution-tier {
		color: var(--fmk-text-muted);
		font-size: 0.8125rem;
		font-style: italic;
		margin-left: 0.25rem;
	}
.fmk-account__access-note {
		color: var(--fmk-text-muted);
		font-size: 0.75rem;
		margin-left: 0.5rem;
	}
.fmk-account__expiry {
		color: var(--fmk-text-muted);
		font-size: 0.75rem;
		margin-left: 0.5rem;
	}
.fmk-account__expiry--expired {
			color: var(--fmk-error-text);
		}
/* stylelint-disable-next-line no-descending-specificity */
.fmk-account__item--expired a {
		color: var(--fmk-text-muted);
	}
.fmk-account__footer {
		display: flex;
		justify-content: center;
		gap: 1.5rem;
		margin-top: auto;
		padding-top: 1rem;
		border-top: 1px solid var(--fmk-border);
	}
.fmk-account__link {
		color: var(--fmk-text-muted);
		font-size: 0.875rem;
		text-decoration: none;
	}
.fmk-account__link:hover {
			color: var(--fmk-primary);
			text-decoration: underline;
		}

/* ============================================
   Shared login surface (password + email code)
   Layered on top of the per-variant
   .fmk-paywall__login-form / .fmk-account__login-form styles.
   ============================================ */
/* Native `hidden` must win over the per-variant form display rules
	   (.fmk-paywall__login-form { display: flex }, etc.). Author rules always
	   beat the UA [hidden] { display: none }, so without this every form —
	   password, code-request, code-verify — renders at once. The descendant
	   selector (0,2,0) out-specifies the single-class variant rules (0,1,0). */
.fmk-login [hidden] {
		display: none;
	}
/* Secondary affordance: "Email me a code instead" / "Use your password
	   instead" / "Send a new code". A button styled as an inline link. */
.fmk-login__toggle {
		display: inline-block;
		margin-top: 0.5rem;
		padding: 0;
		background: none;
		border: none;
		color: var(--fmk-text-muted);
		font-family: inherit;
		font-size: 0.875rem;
		text-decoration: underline;
		cursor: pointer;
	}
.fmk-login__toggle:hover {
			color: var(--fmk-primary);
		}
/* Inline flex row: drop the stacked-layout top margin so the toggle's
	   baseline lines up with the inputs + submit button (account variant,
	   which stacks, keeps the margin). */
.fmk-paywall__login-form .fmk-login__toggle {
		margin-top: 0;
	}
.fmk-login__code-hint {
		margin: 0 0 0.75rem 0;
		font-size: 0.875rem;
		color: var(--fmk-text-muted);
	}
/* The code-verify input takes a short, spaced-out, bold code (no
	   placeholder — the letter-spacing would render it as gapped text). */
.fmk-login .fmk-login__code-verify-form input[name="code"] {
		letter-spacing: 0.3em;
		font-variant-numeric: tabular-nums;
		font-weight: 700;
	}