/* Fabrica Monetization Kit - Shared Styles */

/* ============================================
   CSS Variables
   ============================================ */
:root {
	--fmk-primary: #2271b1;
	--fmk-primary-hover: #135e96;
	--fmk-success: #28a745;
	--fmk-success-hover: #218838;
	--fmk-border: #e0e0e0;
	--fmk-bg-light: #f8f9fa;
	--fmk-text: #1a1a1a;
	--fmk-text-muted: #666;
	--fmk-error-bg: #f8d7da;
	--fmk-error-border: #f5c6cb;
	--fmk-error-text: #721c24;
	--fmk-warning-bg: #fff3cd;
	--fmk-warning-border: #ffc107;
	--fmk-warning-text: #856404;
	--fmk-radius: 0.75rem;
	--fmk-radius-sm: 0.5rem;

	/* Scroll offset so JS-driven scrollIntoView on success/state-change clears
	 * sticky headers. Themes with a fixed header should override this in a
	 * theme stylesheet (e.g. `.fmk-block { --fmk-scroll-offset: 6rem; }`). */
	--fmk-scroll-offset: 5rem;

	/* End colour of the fade gradient that softens preview content into the
	 * paywall card. Defaults to white to match the article background; themes
	 * with a non-white body background should override this on :root (e.g.
	 * `:root { --fmk-paywall-fade-color: #f5f1ea; }`). */
	--fmk-paywall-fade-color: #fff;
}

/* Honoured by JS scrollIntoView() in src/shared/stripe-checkout.js after a
 * successful payment, so the success panel isn't hidden under a sticky
 * header. */
.fmk-block {
	clear: both;
	margin: 1.5rem 0;
	padding: 1.5rem;
	font-family: sans-serif;
	background: #fff;
	border: 1px solid var(--fmk-border);
	border-radius: var(--fmk-radius);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	scroll-margin-top: var(--fmk-scroll-offset);
}

.fmk-block__title {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--fmk-text);
	text-align: center;
}

/* ============================================
   Shared Button Styles
   ============================================ */
.fmk-btn {
	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;
	border: none;
	border-radius: var(--fmk-radius-sm);
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
}

.fmk-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.fmk-btn--primary {
	background: var(--fmk-primary);
	color: #fff;
}

.fmk-btn--primary:focus,
.fmk-btn--primary:hover:not(:disabled) {
	background: var(--fmk-primary-hover);
	color: #fff;
}

.fmk-btn--secondary {
	background: var(--fmk-bg-light);
	color: var(--fmk-text);
	border: 2px solid var(--fmk-border);
}

.fmk-btn--secondary:focus,
.fmk-btn--secondary:hover:not(:disabled) {
	background: #fff;
	border-color: var(--fmk-primary);
	color: var(--fmk-text);
}

/* ============================================
   Shared Message/Notice Styles
   ============================================ */
.fmk-message {
	padding: 0.75rem 1rem;
	margin: 1rem 0;
	font-size: 0.875rem;
	background: #fff;
	border: 1px solid var(--fmk-border);
	border-radius: var(--fmk-radius-sm);
}

.fmk-message--error {
	background: var(--fmk-error-bg);
	border-color: var(--fmk-error-border);
	color: var(--fmk-error-text);
}

.fmk-message[hidden] {
	display: none;
}

.fmk-notice {
	padding: 0.75rem 1rem;
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	border-radius: var(--fmk-radius-sm);
}

.fmk-notice p {
	margin: 0;
}

.fmk-notice--warning {
	background: var(--fmk-warning-bg);
	border: 1px solid var(--fmk-warning-border);
	color: var(--fmk-warning-text);
}

.fmk-notice--info {
	background: var(--fmk-info-bg, #e7f3ff);
	border: 1px solid var(--fmk-info-border, #b3d7ff);
	color: var(--fmk-info-text, #004085);
}

/* ============================================
   Shared Option Grid
   The row that holds .fmk-option-btn — paywall and membership actions, and
   contribution tiers. One rule rather than the same declaration repeated in
   subscribe.css and the contributions block, since the child is shared.

   The column floor follows the content, not the surface. A floor wide enough
   for a descriptive option (__label + __price + __description) forces a wrap
   on a row of bare amounts that would fit easily: three tiers in a 476px card
   need 3 x 180 + 2 x 10 = 560px at the old floor, so auto-fit fell back to two
   233px columns and dropped the third onto its own row. 7rem lets the same
   three sit across at 152px. Wide containers are unaffected either way —
   auto-fit collapses the empty tracks, so three tiers stay three columns.
   ============================================ */
.fmk-paywall__actions,
.fmk-contributions__tiers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
	gap: 0.625rem;
}

/* Only options carrying secondary text need the wider column. Contributions
   tiers never render a description; the paywall templates always do, unless a
   site empties the copy via fabrica_monetization_kit_text_*, in which case the
   tighter floor is the correct answer for them too. */
.fmk-paywall__actions:has(.fmk-option-btn__description),
.fmk-contributions__tiers:has(.fmk-option-btn__description) {
	grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
}

/* ============================================
   Shared Option Button (flexible children)
   ============================================ */
.fmk-option-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.875rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--fmk-text);
	text-align: center;
	background: var(--fmk-bg-light);
	border: 2px solid var(--fmk-border);
	border-radius: 0.625rem;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease;
}

.fmk-option-btn[hidden] {
	display: none;
}

.fmk-option-btn:hover {
	border-color: var(--fmk-primary);
	background: #fff;
}

.fmk-option-btn--selected {
	border-color: var(--fmk-success);
	background: #d4edda;
	color: #155724;
}

/* Price element - prominent display for amount selection */
.fmk-option-btn__price {
	font-size: 1.125rem;
	font-weight: 700;
}

/* Label element - the option name, sits above the price */
.fmk-option-btn__label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--fmk-text);
}

.fmk-option-btn--selected .fmk-option-btn__label {
	color: #155724;
}

/* Description element - secondary text below the price */
.fmk-option-btn__description {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--fmk-text-muted);
}

.fmk-option-btn--selected .fmk-option-btn__description {
	color: #155724;
}

/* ============================================
   Shared Inline Checkout Shell
   Used by paywall, membership, and contributions blocks.
   ============================================ */
.fmk-checkout {
	margin-top: 1.25rem;
}

.fmk-checkout[hidden] {
	display: none;
}

.fmk-checkout__amount {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--fmk-success);
	text-align: center;
	margin-bottom: 0.75rem;
}

.fmk-checkout__summary {
	margin-bottom: 1.25rem;
	font-size: 0.875rem;
	color: var(--fmk-text-muted);
	text-align: center;
}

.fmk-checkout__summary p {
	margin: 0;
}

.fmk-checkout__summary strong {
	color: var(--fmk-text);
}

.fmk-checkout__form {
	margin-top: 1.25rem;
}

.fmk-checkout__form-row {
	display: block;
	margin-bottom: 1rem;
}

.fmk-checkout__form-row > span {
	display: block;
	font-size: 0.8125rem;
	font-weight: 500;
	color: #333;
	margin-bottom: 0.375rem;
}

.fmk-checkout__form-row input[type="email"],
.fmk-checkout__form-row input[type="text"],
.fmk-checkout__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-checkout__form-row input:focus {
	border-color: var(--fmk-primary);
	outline: none;
}

.fmk-checkout__form-row-group {
	display: flex;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.fmk-checkout__form-row-group .fmk-checkout__form-row {
	flex: 1;
	margin-bottom: 0;
}

.fmk-checkout__loading {
	padding: 1.25rem;
	text-align: center;
	color: var(--fmk-text-muted);
	font-size: 0.875rem;
}

.fmk-checkout__payment-element {
	padding: 0.875rem 0.75rem;
	border: 2px solid var(--fmk-border);
	border-radius: var(--fmk-radius-sm);
	background: #fff;
	transition: border-color 0.2s;
}

.fmk-checkout__payment-element.StripeElement--focus {
	border-color: var(--fmk-primary);
}

.fmk-checkout__submit {
	display: block;
	margin: 1.25rem auto 0;
	padding: 0.875rem 1.5rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	background: var(--fmk-success);
	border: none;
	border-radius: var(--fmk-radius-sm);
	cursor: pointer;
	transition: background 0.2s, opacity 0.2s;
}

.fmk-checkout__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.fmk-checkout__submit:hover:not(:disabled) {
	background: var(--fmk-success-hover);
}

.fmk-checkout__spinner {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: fmk-spin 0.8s linear infinite;
}

.fmk-checkout__spinner[hidden] {
	display: none;
}

.fmk-checkout__button-text[hidden] {
	display: none;
}

.fmk-checkout__notice {
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	border-radius: var(--fmk-radius-sm);
}

.fmk-checkout__notice p {
	margin: 0;
}

.fmk-checkout__notice--info {
	background: var(--fmk-info-bg, #e7f3ff);
	border: 1px solid var(--fmk-info-border, #b3d7ff);
	color: var(--fmk-info-text, #004085);
}

.fmk-checkout__back {
	display: block;
	margin: 0 auto 0.75rem;
	padding: 0.25rem 0;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--fmk-text-muted);
	background: transparent;
	border: none;
	cursor: pointer;
}

.fmk-checkout__back:hover {
	color: var(--fmk-text);
}

@keyframes fmk-spin {

	to {
		transform: rotate(360deg);
	}
}