/**
 * Kserv Frontend Styles
 *
 * Gate layout and structural styles. Themes can override
 * via specificity or by replacing gate HTML entirely
 * using the kserv_soft_gate_html / kserv_hard_gate_html filters.
 */

/* ------------------------------------------------
   Paywall Container
   ------------------------------------------------ */
.kserv-paywall-container {
	position: relative;
}

.kserv-paywall-container.kserv-loading .kserv-content {
	min-height: 200px;
}

/* No-preview mode (paywall_preview_count = 0): never show the blur.
   With no preceding text inside the container, the blur's negative
   margin-top sucks it up into unrelated content above. */
.kserv-paywall-container--no-preview .kserv-blur-container {
	display: none !important;
}

/* Full Width Overlay (internal CSS name kept as --half-page for backward
   compat with the setting key). Hard gate pinned to the bottom of the
   viewport. Height grows to fit the card with a 50vh floor (so short
   cards still feel "half-page") and a 90vh ceiling (so the article above
   never gets fully eaten). Internal overflow only kicks in for variants
   whose card exceeds 90vh on narrow viewports.

   Combines freely with the blur effect (which fires independently at
   the cutoff line in the article flow). */
.kserv-paywall-container--half-page [data-kserv-gate-hard]:not(.hidden) {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	min-height: 50vh;
	max-height: 90vh;
	z-index: 999;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow-y: auto;
	padding: var(--kserv-space-4, 24px);
	background: #ffffff;
	box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
}

/* Blur effect at the cutoff — opt-in via `paywall_blur_at_cutoff`.
   Gated on BOTH the operator's --blur class AND --gate-visible
   (added by JS when soft OR hard gate is revealed) so:
     1) Blur is invisible when no gate is showing (no orphan strip on
        access-granted articles with full content).
     2) Blur is invisible when operator left the toggle off.
   Independent of overlay layout; works with any variant. Fires for
   both soft and hard gates.

   Two-layer effect:
     - backdrop-filter: blur(16px) — heavy glyph blur, text loses structure
     - background: linear-gradient(white) — progressive white cover so
       the lower portion of the fade region is opaque enough that even
       blurry glyphs are masked behind a near-white field.

   Mask-image fades the effect IN from the top so there's no hard edge
   where the last clear line of text meets the blur — steeper ramp than
   before so the bottom ~40% of the strip is fully maxed (heavy blur +
   dense white cover).

   The gate is pulled up via negative margin (below) so the eyebrow +
   card overlap the lower (max-white) portion of the blur instead of
   stacking below it as visible dead space. */
.kserv-paywall-container--blur.kserv-paywall-container--gate-visible .kserv-blur-container {
	display: block;
	height: 360px;
	margin-top: -360px;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0.92) 100%
	);
	-webkit-mask-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.6) 30%,
		rgba(0, 0, 0, 1) 60%,
		rgba(0, 0, 0, 1) 100%
	);
	mask-image: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.6) 30%,
		rgba(0, 0, 0, 1) 60%,
		rgba(0, 0, 0, 1) 100%
	);
}

/* Pull the hard gate up so its eyebrow + card overlap the lower portion
   of the blur fade region — where the white cover is nearly opaque and
   would otherwise read as visible dead space between faded text and
   the gate. Excludes overlay mode where the gate is already position:
   fixed at the viewport bottom (different layout path entirely). */
.kserv-paywall-container--blur.kserv-paywall-container--gate-visible:not(.kserv-paywall-container--half-page) [data-kserv-gate-hard]:not(.hidden),
.kserv-paywall-container--blur.kserv-paywall-container--gate-visible:not(.kserv-paywall-container--half-page) [data-kserv-gate-soft]:not(.hidden) {
	margin-top: -100px;
	position: relative;
	z-index: 5;
}

/* ------------------------------------------------
   Blur overlay (sits between visible content and gate)

   Uses backdrop-filter: blur() — a transparent overlay that blurs
   whatever pixels are painted behind it. Negative margin-top pulls
   the overlay up so it covers the final N pixels of the article
   paragraph(s) above the [kserv_paywall] shortcode, producing the
   "preview fades into blur" effect.

   Soft top edge: a top-to-bottom mask-image ramps the element's
   alpha from 0 → 1, which in turn ramps the backdrop-filter's
   effect from no-blur → full-blur. Without this, the element's
   hard rectangular edge produced a visible sharp line where
   sharp text ended and blurred text began. Gradient uses two
   stops at 15% and 65% so the transition happens in the middle
   of the overlay — the top ~22px stays sharp (matching the
   preceding paragraph's last line-height) and the bottom ~52px
   is fully blurred.

   Why not a linear-gradient white fade: gradients just hide text
   behind opacity — visually less distinct, and mismatch the target.
   backdrop-filter blurs the actual text glyphs.
   ------------------------------------------------ */
.kserv-blur-container {
	display: none;
	height: 140px;
	margin-top: -140px;
	margin-left: -40px;
	margin-right: -40px;
	width: calc(100% + 80px);
	position: relative;
	z-index: 2;
	pointer-events: none;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	-webkit-mask-image: radial-gradient(
		ellipse 75% 150% at 50% 100%,
		rgba(0, 0, 0, 1) 55%,
		rgba(0, 0, 0, 0.5) 80%,
		rgba(0, 0, 0, 0) 100%
	);
	mask-image: radial-gradient(
		ellipse 75% 150% at 50% 100%,
		rgba(0, 0, 0, 1) 55%,
		rgba(0, 0, 0, 0.5) 80%,
		rgba(0, 0, 0, 0) 100%
	);
}

/* ------------------------------------------------
   Gate — shared base

   Two-layer structure:
     .kserv-gate__wrap  — centered container (max-width), holds the
                          card plus the sign-in-above and help-below
                          rows that sit OUTSIDE the card.
     .kserv-gate__card  — the white rounded-corner panel that holds
                          title / pricing / benefits / CTA.
   Inside the card everything is center-aligned by default; themes
   that want left-aligned content override .kserv-gate__card text-align.
   ------------------------------------------------ */
.kserv-gate {
	position: relative;
	z-index: 2;
	background: transparent;
}

.kserv-gate.hidden {
	display: none;
}

.kserv-gate__wrap {
	max-width: 720px;
	margin: 0 auto;
	padding: 16px 20px 24px;
	text-align: center;
}

/* Prolog — the "To continue reading this article..." headline that
   sits above the card on both soft and hard gates. Large, bold,
   centered. Renders outside the card as the attention-grabber; the
   card's own title (.kserv-gate__title) is the in-card headline. */
.kserv-gate__prolog {
	font-size: 26px;
	font-weight: 700;
	color: #000;
	margin: 0 0 4px 0;
	line-height: 1.2;
	text-align: center;
}

.kserv-gate__card {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	padding: 32px 24px 36px;
	margin: 12px 0;
	text-align: center;
}

.kserv-gate__title {
	font-size: 28px;
	font-weight: 700;
	color: #000;
	margin: 0 0 16px 0;
	line-height: 1.2;
	text-align: center;
}

.kserv-gate__subtitle {
	font-size: 16px;
	color: #555;
	margin: 0 0 20px 0;
	text-align: center;
}

.kserv-gate__message {
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	margin: 0 0 20px 0;
	text-align: center;
}

.kserv-gate__benefits-intro {
	font-style: italic;
	font-size: 16px;
	color: #333;
	margin: 8px 0 16px 0;
	text-align: center;
}

/* Sign-in row rendered ABOVE the card on the hard gate (the "Already
   have an account? Sign In" affordance that sits outside the panel).
   The soft gate re-uses .kserv-gate__signin inside its card. */
.kserv-gate__signin--above {
	margin: 0 0 4px 0;
	font-size: 14px;
	font-style: italic;
	color: #555;
}

/* ------------------------------------------------
   Gate — CTA button

   Selector specificity bumped (`.kserv-gate .kserv-gate__cta` instead
   of `.kserv-gate__cta`) so themes with a generic `a { color: ... }`
   rule don't bleed their link color into the button text — FRW's
   style.css is one such theme. The (0,2,0) of the chained selector
   beats any (0,0,1) element selector and most typical (0,1,0) class
   overrides without requiring !important. Themes that want a
   different CTA treatment still win via the kserv_hard_gate_html /
   kserv_soft_gate_html filters (full markup replacement) or a more
   specific selector.
   ------------------------------------------------ */
.kserv-gate .kserv-gate__cta {
	display: inline-block;
	background-color: #000;
	color: #fff;
	padding: 12px 28px;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.2s;
}

.kserv-gate .kserv-gate__cta:hover {
	background-color: #333;
	color: #fff;
	text-decoration: none;
}

/* ------------------------------------------------
   Gate — Sign-in link
   ------------------------------------------------ */
.kserv-gate__signin {
	font-size: 14px;
	color: #555;
	margin-top: 16px;
}

.kserv-gate__signin a,
.kserv-sign-in-link {
	color: #1a0dab;
	text-decoration: none;
	cursor: pointer;
}

.kserv-gate__signin a:hover,
.kserv-sign-in-link:hover {
	text-decoration: underline;
}

/* ------------------------------------------------
   Gate — Benefits list

   Two-column flex list. Because the card center-aligns everything by
   default, the list itself is left-aligned within its own box (checks
   read naturally LTR) but the BOX is centered inside the card by
   constraining max-width + margin: 0 auto. Items flow top→bottom within
   each column because the PHP splits the list into two <ul>s rather
   than letting CSS column-count handle it — gives predictable rendering
   across browsers + easier theme override.
   ------------------------------------------------ */
.kserv-gate__benefits {
	display: flex;
	gap: 20px 48px;
	margin: 0 auto 28px;
	max-width: 640px;
	text-align: left;
}

.kserv-gate__benefits ul,
.kserv-gate__benefits .kserv-gate__benefits-col {
	flex: 1;
	list-style: none;
	padding: 0;
	margin: 0;
}

.kserv-gate .kserv-gate__benefits ul {
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

.kserv-gate__benefits li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.45;
	color: #000;
	list-style: none;
	list-style-type: none;
}

.kserv-gate__benefits li::marker {
	content: "";
	display: none;
}

.kserv-gate__benefits li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
	color: #000;
}

/* ------------------------------------------------
   Gate — Pricing
   ------------------------------------------------ */
.kserv-gate__pricing {
	margin: 0 0 24px 0;
	text-align: center;
}

.kserv-gate__price {
	font-size: 28px;
	font-weight: 700;
	color: #000;
	line-height: 1.2;
}

.kserv-gate__price-original {
	text-decoration: line-through;
	color: #666;
	font-weight: 700;
	margin-right: 0.25em;
}

.kserv-gate__price-sale {
	color: #1C1ECF;
	font-weight: 700;
}

.kserv-gate__price-detail {
	font-size: 14px;
	font-weight: 400;
	color: #555;
	margin-top: 6px;
}

/* ------------------------------------------------
   Gate — Contact link
   ------------------------------------------------ */
.kserv-gate__help {
	font-size: 14px;
	color: #555;
	margin-top: 24px;
}

.kserv-gate__help a {
	color: #1a0dab;
	text-decoration: none;
}

.kserv-gate__help a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------
   Soft gate — the "tier 1" card

   The soft gate card is tighter (less padding) than the hard gate —
   it's a momentary nudge, not a sales pitch. Dismiss button sits
   below the CTA as a secondary action.
   ------------------------------------------------ */
.kserv-gate--soft .kserv-gate__card {
	padding: 24px 24px 28px;
}

.kserv-gate--soft .kserv-gate__dismiss {
	display: block;
	margin: 12px auto 0;
	background: none;
	border: none;
	color: #5c5d5f;
	font-size: 14px;
	cursor: pointer;
	text-decoration: underline;
	padding: 0;
}

.kserv-gate--soft .kserv-gate__dismiss:hover {
	color: #010C16;
}

/* Variant-agnostic dismiss button — sits below the card in the wrap
   for the new variant-driven soft gate. The legacy in-card dismiss
   above (`.kserv-gate--soft .kserv-gate__dismiss`) stays in place for
   any remaining inline usages; this one is keyed on
   `--bottom` so it doesn't collide. */
.kserv-gate--soft .kserv-gate__dismiss--bottom {
	display: block;
	margin: 16px auto 0;
	padding: 8px 16px;
	background: none;
	border: none;
	color: var(--ink-600, #5c5d5f);
	font-size: 14px;
	cursor: pointer;
	text-decoration: underline;
}

.kserv-gate--soft .kserv-gate__dismiss--bottom:hover {
	color: var(--ink-900, #010C16);
}

/* ------------------------------------------------
   Responsive
   ------------------------------------------------ */
@media (max-width: 768px) {
	.kserv-gate__card {
		padding: 24px 18px 28px;
	}

	.kserv-gate__title {
		font-size: 24px;
	}

	.kserv-gate__benefits {
		flex-direction: column;
		gap: 8px;
		max-width: 100%;
	}

	.kserv-gate__price {
		font-size: 22px;
	}
}

/* ------------------------------------------------
   Modal — overlay + content
   ------------------------------------------------ */
.kserv-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kserv-modal.hidden {
	display: none !important;
}

.kserv-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

.kserv-modal__content {
	position: relative;
	z-index: 1;
	background: #fff;
	color: #333;
	width: 100%;
	max-width: 420px;
	padding: 40px 32px 32px;
	border-radius: 6px;
	box-sizing: border-box;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	max-height: 90vh;
	overflow-y: auto;
}

.kserv-modal__close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: transparent;
	border: 0;
	font-size: 28px;
	line-height: 1;
	color: #666;
	cursor: pointer;
	padding: 4px 8px;
}

.kserv-modal__close:hover {
	color: #000;
}

.kserv-modal__title {
	font-size: 22px;
	font-weight: 600;
	color: #000;
	margin: 0 0 20px 0;
	line-height: 1.2;
}

/* ------------------------------------------------
   Modal — form
   ------------------------------------------------ */
.kserv-modal__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.kserv-modal__field {
	display: flex;
	flex-direction: column;
}

.kserv-modal__field label {
	font-size: 13px;
	font-weight: 500;
	color: #333;
	margin-bottom: 4px;
}

.kserv-modal__field input {
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	color: #333;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

.kserv-modal__field input:focus {
	outline: 2px solid #1a0dab;
	outline-offset: -2px;
}

.kserv-modal__field-error {
	color: #c00;
	font-size: 13px;
	margin-top: 4px;
}

.kserv-modal__submit {
	background: #000;
	color: #fff;
	border: 0;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 500;
	border-radius: 4px;
	cursor: pointer;
	margin-top: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.kserv-modal__submit:hover:not(:disabled) {
	background: #333;
}

.kserv-modal__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.kserv-modal__error {
	color: #c00;
	font-size: 14px;
	text-align: center;
	margin-top: 4px;
}

/* ------------------------------------------------
   Modal — OAuth section
   ------------------------------------------------ */
.kserv-modal__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0;
	color: #666;
	font-size: 13px;
}

.kserv-modal__divider::before,
.kserv-modal__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #ddd;
}

.kserv-modal__oauth {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kserv-modal__oauth-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	color: #333;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.kserv-modal__oauth-button:hover {
	border-color: #999;
	background: #f7f7f7;
}

.kserv-modal__oauth-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.kserv-modal__oauth-icon svg {
	width: 100%;
	height: 100%;
}

/* ------------------------------------------------
   Modal — footer links
   ------------------------------------------------ */
.kserv-modal__register-row {
	margin: 0 0 12px;
	font-size: 14px;
	color: inherit;
}

.kserv-modal__register-link {
	color: #1a0dab;
	text-decoration: underline;
	font-weight: 600;
}

.kserv-modal__register-link:hover {
	text-decoration: none;
}

.kserv-modal__message {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.5;
	color: inherit;
	opacity: 0.85;
}

.kserv-modal__forgot {
	margin: 16px 0 0;
	text-align: center;
}

.kserv-modal__links {
	margin-top: 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 16px;
	font-size: 13px;
}

.kserv-modal__link {
	font-size: 13px;
	color: #1a0dab;
	text-decoration: none;
}

.kserv-modal__link:hover {
	text-decoration: underline;
}

.kserv-modal__link-separator {
	display: inline-block;
	margin: 0 8px;
	color: #999;
	font-size: 13px;
}

/* ------------------------------------------------
   Newsletter form
   ------------------------------------------------ */
.kserv-newsletter-form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 8px;
	max-width: 480px;
}

.kserv-newsletter-form__field {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
}

.kserv-newsletter-form__field input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	background: #fff;
	color: inherit;
}

.kserv-newsletter-form__field input:focus {
	outline: none;
	border-color: #1a73e8;
	box-shadow: 0 0 0 2px rgba( 26, 115, 232, 0.2 );
}

.kserv-newsletter-form__field-error {
	display: block;
	margin-top: 4px;
	color: #d32f2f;
	font-size: 12px;
}

.kserv-newsletter-form__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	border: 0;
	border-radius: 4px;
	background: #111;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.kserv-newsletter-form__submit:hover:not(:disabled) {
	background: #333;
}

.kserv-newsletter-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.kserv-newsletter-form__message {
	flex: 1 1 100%;
	margin-top: 4px;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 13px;
}

.kserv-newsletter-form__message--success {
	background: #e6f4ea;
	color: #1e6f3a;
}

.kserv-newsletter-form__message--error {
	background: #fdecea;
	color: #b3261e;
}

/* Stacked layout (shortcode attr layout="stacked") — input on its own
   row, button below at full width. Useful for narrow placements like
   sidebars and cards. */
.kserv-newsletter-form--stacked {
	flex-direction: column;
	align-items: stretch;
}

.kserv-newsletter-form--stacked .kserv-newsletter-form__field {
	flex: 1 1 auto;
}

.kserv-newsletter-form--stacked .kserv-newsletter-form__submit {
	width: 100%;
}

/* Subscribed state — CSS-only collapse triggered by JS adding the
   `--subscribed` class on success (or on page load if localStorage
   remembers a prior subscription). Hides the inputs + button so the
   success message stays as the sole visible affordance. */
.kserv-newsletter-form--subscribed .kserv-newsletter-form__field,
.kserv-newsletter-form--subscribed .kserv-newsletter-form__submit {
	display: none;
}

/* Newsletter paywall variant — inherits the Simple card chrome so
   accent color, radius, typography, and outer wrap align with the rest
   of the variant catalog. The form inside picks up the accent via the
   submit button being styled as `.kserv-gate__simple-cta-primary`. */
.kserv-gate--newsletter,
.kserv-gate--registration {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Registration variant — wraps the [kserv_paywall_register_form] inside
   the Simple card chrome. The form's submit button uses the register-
   form's own styling rather than the Simple CTA classes, but inherits
   accent + radius via the kserv-paywall-container scope. */
.kserv-gate--registration .kserv-gate__registration-actions {
	gap: 12px;
}

.kserv-gate--registration .kserv-register-form {
	width: 100%;
}

.kserv-newsletter-form--paywall {
	width: 100%;
	margin-bottom: 12px;
}

.kserv-newsletter-form--paywall .kserv-newsletter-form__field input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ink-200, #e2e1de);
	border-radius: calc(var(--radius, 14px) - 6px);
	font-size: 0.95rem;
	background: #fff;
}

.kserv-newsletter-form--paywall .kserv-newsletter-form__field input:focus {
	outline: 2px solid var(--accent, #4f46e5);
	outline-offset: 1px;
	border-color: var(--accent, #4f46e5);
}

.kserv-newsletter-form--paywall .kserv-newsletter-form__submit {
	display: block;
	width: 100%;
	text-align: center;
}

/* ------------------------------------------------
   Register & Login forms (shared selectors)
   ------------------------------------------------ */
.kserv-register-form,
.kserv-login-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 500px;
	margin: 0 auto;
	padding: 24px 0;
	color: #333;
}

.kserv-register-form__field,
.kserv-login-form__field {
	display: flex;
	flex-direction: column;
}

.kserv-register-form__field label,
.kserv-login-form__field label {
	font-size: 13px;
	font-weight: 500;
	color: #333;
	margin-bottom: 4px;
}

.kserv-register-form__required,
.kserv-login-form__required {
	color: #c00;
	font-weight: 500;
}

.kserv-register-form__field input,
.kserv-register-form__field select,
.kserv-login-form__field input {
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	color: #333;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

.kserv-register-form__field input:focus,
.kserv-register-form__field select:focus,
.kserv-login-form__field input:focus {
	outline: 2px solid #1a0dab;
	outline-offset: -2px;
}

.kserv-register-form__field-error,
.kserv-login-form__field-error {
	color: #c00;
	font-size: 13px;
	margin-top: 4px;
}

.kserv-register-form__field--checkbox {
	flex-direction: row;
	align-items: center;
}

.kserv-register-form__field--checkbox label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 0;
	font-weight: 400;
	cursor: pointer;
}

.kserv-register-form__field--checkbox input[type="checkbox"] {
	width: auto;
	margin: 0;
	flex-shrink: 0;
}

.kserv-register-form__submit,
.kserv-login-form__submit {
	background: #000;
	color: #fff;
	border: 0;
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 500;
	border-radius: 4px;
	cursor: pointer;
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.kserv-register-form__submit:hover:not(:disabled),
.kserv-login-form__submit:hover:not(:disabled) {
	background: #333;
}

.kserv-register-form__submit:disabled,
.kserv-login-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.kserv-register-form__error,
.kserv-login-form__error {
	color: #c00;
	font-size: 14px;
	text-align: center;
	margin-top: 4px;
}

.kserv-register-form__error a,
.kserv-login-form__error a {
	color: #c00;
	text-decoration: underline;
}

.kserv-register-form__divider,
.kserv-login-form__divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0;
	color: #666;
	font-size: 13px;
}

.kserv-register-form__divider::before,
.kserv-register-form__divider::after,
.kserv-login-form__divider::before,
.kserv-login-form__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #ddd;
}

.kserv-register-form__oauth,
.kserv-login-form__oauth {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kserv-register-form__oauth-button,
.kserv-login-form__oauth-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	color: #333;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s;
}

.kserv-register-form__oauth-button:hover,
.kserv-login-form__oauth-button:hover {
	border-color: #999;
	background: #f7f7f7;
}

.kserv-register-form__oauth-icon,
.kserv-login-form__oauth-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.kserv-register-form__oauth-icon svg,
.kserv-login-form__oauth-icon svg {
	width: 100%;
	height: 100%;
}

.kserv-register-form__signin {
	font-size: 14px;
	color: #555;
	text-align: center;
	margin-top: 16px;
}

.kserv-register-form__signin a {
	color: #1a0dab;
	text-decoration: none;
	cursor: pointer;
}

.kserv-register-form__signin a:hover {
	text-decoration: underline;
}

.kserv-login-form__links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 14px;
	flex-wrap: wrap;
}

.kserv-login-form__link {
	color: #1a0dab;
	text-decoration: none;
}

.kserv-login-form__link:hover {
	text-decoration: underline;
}

.kserv-login-form__link-separator {
	color: #999;
}

/* ================================================
   Paywall style variants — Pricing (Offer-first) + Showcase (Split-card)
   ================================================

   Scope: only when the operator has selected `paywall_style` =
   `pricing` or `showcase`. Classic continues to use the selectors
   above. Two CSS custom properties drive all per-site theming:
     --accent   — single color hook (default indigo, overridden inline
                  per page via <style> from Paywall::injectStyleVars())
     --radius   — card corner radius in px (default 14)
   All other colors are locked to a warm-gray OKLCH scale so variants
   hold together on any host theme.
   ------------------------------------------------ */

.kserv-paywall-container {
	--surface:   oklch(98% 0.004 85);
	--ink-50:    oklch(97% 0.004 85);
	--ink-100:   oklch(94% 0.004 85);
	--ink-200:   oklch(90% 0.005 85);
	--ink-300:   oklch(83% 0.006 85);
	--ink-400:   oklch(70% 0.007 85);
	--ink-500:   oklch(58% 0.008 85);
	--ink-600:   oklch(48% 0.009 85);
	--ink-700:   oklch(38% 0.009 85);
	--ink-800:   oklch(26% 0.008 85);
	--ink-900:   oklch(18% 0.006 85);
	--accent:    #4f46e5;
	--radius:    14px;
}

/* Variant root resets — localized; never `all: revert` (too nuclear
   and strips accessible focus behavior). Explicit per-element resets
   inside the Pricing and Showcase scopes cancel host-theme styles for
   the elements we care about; anything we don't reset stays as the host
   theme sets it (inherited body font, cursor defaults, etc). */
.kserv-gate--pricing,
.kserv-gate--showcase {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	color: var(--ink-900);
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
}

.kserv-gate--pricing a,
.kserv-gate--showcase a,
.kserv-gate--pricing button,
.kserv-gate--showcase button {
	font: inherit;
	text-decoration: none;
}

.kserv-gate--pricing button,
.kserv-gate--showcase button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.kserv-gate--pricing h2,
.kserv-gate--showcase h2 {
	margin: 0;
	font: inherit;
	color: inherit;
}

.kserv-gate--pricing ul,
.kserv-gate--showcase ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kserv-gate--pricing li,
.kserv-gate--showcase li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Accessible focus rings — handoff called this out as an implementer
   gap. Standard 2px outline + 2px offset in the accent color. */
.kserv-gate--pricing a:focus-visible,
.kserv-gate--showcase a:focus-visible,
.kserv-gate--pricing button:focus-visible,
.kserv-gate--showcase button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Shared eyebrow + shared price block shared by Pricing + Showcase */
.kserv-gate__eyebrow {
	margin: 0 auto 20px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ink-500);
	text-align: center;
}

.kserv-gate__shared-price {
	margin-top: 20px;
	text-align: center;
}

.kserv-gate__shared-price-row {
	display: inline-flex;
	align-items: baseline;
	gap: 12px;
}

.kserv-gate__shared-price-old {
	color: var(--ink-400);
	text-decoration: line-through;
	font-size: 20px;
	font-variant-numeric: tabular-nums;
}

.kserv-gate__shared-price-new {
	color: var(--ink-900);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 0.92;
	letter-spacing: -0.025em;
	font-size: 58px;
}

.kserv-gate__shared-price-period {
	color: var(--ink-600);
	font-size: 18px;
}

.kserv-gate__shared-price-caption {
	margin-top: 10px;
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--ink-500);
}

.kserv-gate__check-icon {
	flex: 0 0 auto;
}

/* ------------------------------------------------
   Pricing — Offer-first
   ------------------------------------------------ */

.kserv-gate__pricing-wrap {
	max-width: 540px;
	margin: 0 auto;
}

.kserv-gate__pricing-card {
	border: 1px solid var(--ink-200);
	border-radius: var(--radius);
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px -8px rgba(17, 17, 17, 0.08);
}

.kserv-gate__pricing-ribbon {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 24px;
	background: var(--accent);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.kserv-gate__pricing-ribbon-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.8);
}

.kserv-gate__pricing-body {
	padding: 32px 40px;
	text-align: center;
}

.kserv-gate__pricing-title {
	font-size: 22px;
	font-weight: 600;
	color: var(--ink-900);
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.kserv-gate__pricing-benefits {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
}

.kserv-gate__pricing-benefit {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 8px 0;
	font-size: 14.5px;
	color: var(--ink-800);
	line-height: 1.45;
}

.kserv-gate__pricing-benefit .kserv-gate__check-icon {
	color: var(--accent);
	margin-top: 3px;
}

.kserv-gate--pricing .kserv-gate__pricing-cta {
	display: block;
	margin-top: 24px;
	width: 100%;
	padding: 16px 18px;
	background: var(--accent);
	color: #fff;
	font-weight: 600;
	font-size: 16px;
	text-align: center;
	border-radius: calc(var(--radius) - 4px);
	box-shadow: 0 1px 1px rgba(17, 17, 17, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	transition: filter 150ms;
}

.kserv-gate--pricing .kserv-gate__pricing-cta:hover {
	filter: brightness(0.95);
	color: #fff;
}

.kserv-gate__pricing-trust,
.kserv-gate .kserv-gate__pricing-body .kserv-gate__trust {
	margin-top: 12px;
	font-size: 11px;
	color: var(--ink-500);
	text-align: center;
}

.kserv-gate__pricing-footer {
	padding: 12px 24px;
	text-align: center;
	font-size: 12px;
	color: var(--ink-600);
	background: var(--ink-50);
	border-top: 1px solid var(--ink-100);
}

.kserv-gate--pricing .kserv-gate__pricing-signin-link {
	color: var(--ink-900);
	font-weight: 500;
}

.kserv-gate--pricing .kserv-gate__pricing-help-link {
	color: var(--ink-600);
}

.kserv-gate--pricing .kserv-gate__pricing-signin-link:hover,
.kserv-gate--pricing .kserv-gate__pricing-help-link:hover {
	text-decoration: underline;
}

/* ------------------------------------------------
   Simple — hard gate

   Three-section card per design (v4s-desktop / v4s-mobile):
     1. Hero (tinted background, accent-color at ~8% opacity) — circular
        accent icon, title, optional message.
     2. Actions (white background) — primary Subscribe + secondary Sign In.
     3. Footer (neutral light background) — optional help prompt + link.

   No pricing, no benefits list, no ribbon, no trust line. Designed for
   sites whose paywall is purely "sign in or buy a subscription" with no
   active pricing offer.

   Accent tinting uses color-mix() — auto-derives a soft hero background
   from the operator's --accent setting without needing a separate field.
   ------------------------------------------------ */
.kserv-gate--simple {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.kserv-gate--simple a,
.kserv-gate--simple button {
	font-family: inherit;
}

.kserv-gate--simple button {
	border: 0;
	cursor: pointer;
}

.kserv-gate--simple h2 {
	margin: 0;
}

.kserv-gate--simple a:focus-visible,
.kserv-gate--simple button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.kserv-gate__simple-wrap {
	max-width: 540px;
	margin: 0 auto;
}

.kserv-gate__simple-card {
	border: 1px solid var(--ink-200);
	border-radius: var(--radius);
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px -8px rgba(17, 17, 17, 0.08);
}

/* --- Hero section: tinted background, icon, title, message --- */

.kserv-gate__simple-hero {
	padding: 22px 32px 20px;
	text-align: center;
	background: color-mix(in srgb, var(--accent) 8%, #fff);
}

.kserv-gate__simple-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--accent) 18%, #fff);
	color: var(--accent);
}

.kserv-gate__simple-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--ink-900);
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.kserv-gate__simple-message {
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--ink-700);
	line-height: 1.4;
}

/* --- Actions section: white background, two stacked CTAs --- */

.kserv-gate__simple-actions {
	padding: 20px 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.kserv-gate--simple .kserv-gate__simple-cta-primary {
	display: block;
	width: 100%;
	padding: 14px 18px;
	background: var(--accent);
	color: #fff;
	font-weight: 600;
	font-size: 15.5px;
	text-align: center;
	border-radius: calc(var(--radius) - 4px);
	box-shadow: 0 1px 1px rgba(17, 17, 17, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	transition: filter 150ms;
}

.kserv-gate--simple .kserv-gate__simple-cta-primary:hover {
	filter: brightness(0.95);
	color: #fff;
	text-decoration: none;
}

.kserv-gate--simple .kserv-gate__simple-cta-secondary {
	display: block;
	width: 100%;
	padding: 13px 18px;
	background: #fff;
	color: var(--ink-900);
	font-weight: 500;
	font-size: 15px;
	text-align: center;
	border: 1px solid var(--ink-300);
	border-radius: calc(var(--radius) - 4px);
	transition: background 150ms, border-color 150ms;
}

.kserv-gate--simple .kserv-gate__simple-cta-secondary:hover {
	background: var(--ink-50);
	border-color: var(--ink-400);
	color: var(--ink-900);
	text-decoration: none;
}

/* --- Footer section: gray bg, help prompt + link --- */

.kserv-gate__simple-footer {
	padding: 14px 24px;
	text-align: center;
	font-size: 13px;
	color: var(--ink-600);
	background: var(--ink-50);
	border-top: 1px solid var(--ink-100);
}

.kserv-gate__simple-help-prompt {
	color: var(--ink-600);
}

.kserv-gate--simple .kserv-gate__simple-help-link {
	color: var(--ink-900);
	font-weight: 600;
}

.kserv-gate--simple .kserv-gate__simple-help-link:hover {
	text-decoration: underline;
}

/* --- Mobile responsive — tighten padding, keep stacked layout --- */

@media (max-width: 480px) {
	.kserv-gate__simple-hero {
		padding: 28px 22px 24px;
	}

	.kserv-gate__simple-actions {
		padding: 16px 18px 18px;
	}

	.kserv-gate__simple-footer {
		padding: 12px 18px;
	}

	.kserv-gate__simple-title {
		font-size: 19px;
	}

	.kserv-gate__simple-message {
		font-size: 14px;
	}
}

/* ------------------------------------------------
   Showcase — Split-card
   ------------------------------------------------ */

.kserv-gate__showcase-wrap {
	max-width: 780px;
	margin: 0 auto;
}

.kserv-gate__showcase-card {
	display: grid;
	grid-template-columns: minmax(260px, 1fr) 1.15fr;
	border: 1px solid var(--ink-200);
	border-radius: var(--radius);
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px -8px rgba(17, 17, 17, 0.08);
}

.kserv-gate__showcase-pane {
	padding: 40px;
}

.kserv-gate__showcase-pane--left {
	background: color-mix(in oklch, var(--accent) 7%, white);
	border-right: 1px solid var(--ink-200);
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	gap: 24px;
}

.kserv-gate__showcase-pane--right {
	background: #fff;
	padding: 36px;
}

.kserv-gate__showcase-title {
	font-size: 22px;
	font-weight: 600;
	color: var(--ink-900);
	letter-spacing: -0.015em;
	line-height: 1.2;
}

.kserv-gate__showcase-pane--left .kserv-gate__shared-price-new {
	font-size: 54px;
}

.kserv-gate--showcase .kserv-gate__showcase-cta {
	display: block;
	width: 100%;
	padding: 14px 18px;
	background: var(--ink-900);
	color: #fff;
	font-weight: 500;
	font-size: 15px;
	text-align: center;
	border-radius: calc(var(--radius) - 4px);
	box-shadow: 0 1px 1px rgba(17, 17, 17, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transition: opacity 150ms;
}

.kserv-gate--showcase .kserv-gate__showcase-cta:hover {
	opacity: 0.92;
	color: #fff;
}

.kserv-gate__showcase-signin {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--ink-600);
	text-align: center;
}

.kserv-gate--showcase .kserv-gate__showcase-signin-link {
	color: var(--ink-900);
	font-weight: 500;
}

.kserv-gate--showcase .kserv-gate__showcase-signin-link:hover {
	text-decoration: underline;
}

.kserv-gate__showcase-benefits-heading {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--ink-500);
}

.kserv-gate__showcase-benefits {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
}

.kserv-gate__showcase-benefit {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 11px 0;
	font-size: 14.5px;
	color: var(--ink-800);
	line-height: 1.45;
	border-top: 1px solid var(--ink-100);
}

.kserv-gate__showcase-benefit:first-child {
	border-top: 0;
}

.kserv-gate__showcase-benefit-chip {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: color-mix(in oklch, var(--accent) 12%, white);
	color: var(--accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}

.kserv-gate__showcase-help {
	margin: 16px 0 0;
	font-size: 12px;
	color: var(--ink-600);
	text-align: center;
}

.kserv-gate--showcase .kserv-gate__showcase-help-link {
	color: var(--accent);
}

.kserv-gate--showcase .kserv-gate__showcase-help-link:hover {
	text-decoration: underline;
}

/* ------------------------------------------------
   Variants responsive — single breakpoint at 768px
   ------------------------------------------------ */

@media (max-width: 767px) {
	.kserv-gate__pricing-wrap {
		max-width: 360px;
	}

	.kserv-gate__pricing-ribbon {
		font-size: 12px;
	}

	.kserv-gate__pricing-body {
		padding: 24px 22px;
	}

	.kserv-gate__pricing-title {
		font-size: 19px;
	}

	.kserv-gate__shared-price-old {
		font-size: 17px;
	}

	.kserv-gate__shared-price-new {
		font-size: 46px;
	}

	.kserv-gate__showcase-pane--left .kserv-gate__shared-price-new {
		font-size: 46px;
	}

	.kserv-gate__shared-price-period {
		font-size: 15px;
	}

	.kserv-gate__pricing-benefit,
	.kserv-gate__showcase-benefit {
		font-size: 13.5px;
	}

	.kserv-gate__pricing-cta {
		padding: 14px 16px;
		font-size: 15px;
	}

	.kserv-gate__showcase-cta {
		padding: 13px 16px;
		font-size: 14.5px;
	}

	.kserv-gate__showcase-wrap {
		max-width: 360px;
	}

	.kserv-gate__showcase-card {
		grid-template-columns: 1fr;
	}

	.kserv-gate__showcase-pane--left {
		border-right: 0;
		border-bottom: 1px solid var(--ink-200);
		justify-content: space-between;
		padding: 28px;
	}

	.kserv-gate__showcase-pane--right {
		padding: 24px 26px 28px;
	}

	.kserv-gate__showcase-title {
		font-size: 19px;
	}
}

/* ------------------------------------------------
   Auth bar — header drop-in for sign-in / authed state.

   Theme-portable: text inherits currentColor, accent borrows
   --kserv-accent if the host theme exposes it (falls back to a
   neutral indigo). Sized to sit comfortably alongside other header
   links without forcing a specific font/color.
   ------------------------------------------------ */

/* Floating auto-render wrapper. Used when `auth_bar_auto_render` is on
   and the plugin attaches the bar to wp_body_open as a fallback for
   themes without their own auth-bar integration. Pinned top-right with
   high z-index so it floats over the theme's header. Sites with custom
   theme placement turn the setting off so this wrapper never renders. */
/* Auto-render strip — full-width thin bar at the top of the document,
 * rendered at wp_body_open before the theme header. Right-aligned content
 * (Sign in button, or authed greeting/menu). Background color is operator-
 * controlled via the `auth_bar_strip_color` setting; defaults to near-black
 * so it reads as a utility strip regardless of theme. Text stays white. */
.kserv-auth-bar-floating {
	width: 100%;
	box-sizing: border-box;
	background: var(--kserv-auth-bar-strip-bg, #111);
	color: var(--kserv-auth-bar-strip-fg, #fff);
	padding: 6px 16px;
	min-height: 32px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	font-size: 13px;
	line-height: 1.2;
}

/* When the WP admin bar is visible, push the strip below it. WP's own
 * `html { margin-top: 32px }` is overridden by some themes (composable
 * page templates among them), so we belt-and-suspenders it here. */
.admin-bar .kserv-auth-bar-floating {
	margin-top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar .kserv-auth-bar-floating {
		margin-top: 46px;
	}
}

.kserv-auth-bar {
	--kserv-auth-bar-accent: var(--kserv-accent, #4f46e5);
	--kserv-auth-bar-radius: 10px;
	--kserv-auth-bar-bg: rgba(255, 255, 255, 0.06);
	--kserv-auth-bar-bg-hover: rgba(255, 255, 255, 0.12);
	position: relative;
	display: inline-flex;
	align-items: center;
	font-family: inherit;
	color: inherit;
}

.kserv-auth-bar__sign-in {
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	letter-spacing: inherit;
}
.kserv-auth-bar__sign-in:hover,
.kserv-auth-bar__sign-in:focus-visible {
	text-decoration: underline;
	outline: none;
}

.kserv-auth-bar__trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
	letter-spacing: inherit;
}
.kserv-auth-bar__trigger:hover,
.kserv-auth-bar__trigger:focus-visible {
	text-decoration: underline;
	outline: none;
}

.kserv-auth-bar__name {
	font-size: inherit;
	font-weight: inherit;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Flat layout (auth_bar_show_account=off) — plain inline text. */
.kserv-auth-bar--flat {
	gap: 8px;
}
.kserv-auth-bar__greeting {
	font-size: inherit;
}
.kserv-auth-bar__sep {
	opacity: 0.5;
}
.kserv-auth-bar__logout-link {
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	letter-spacing: inherit;
}
.kserv-auth-bar__logout-link:hover,
.kserv-auth-bar__logout-link:focus-visible {
	text-decoration: underline;
	outline: none;
}

.kserv-auth-bar__caret {
	display: inline-block;
	width: 0;
	height: 0;
	border: 4px solid transparent;
	border-top-color: currentColor;
	margin-top: 3px;
	opacity: 0.7;
	transition: transform 120ms ease;
}
.kserv-auth-bar.is-open .kserv-auth-bar__caret {
	transform: rotate(180deg);
	margin-top: -3px;
}

.kserv-auth-bar__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 240px;
	background: #fff;
	color: #1f2937;
	border-radius: var(--kserv-auth-bar-radius);
	box-shadow:
		0 4px 16px rgba(0, 0, 0, 0.08),
		0 12px 28px rgba(0, 0, 0, 0.12);
	z-index: 1000;
	overflow: hidden;
	font-size: 14px;
}
.kserv-auth-bar__menu[hidden] {
	display: none;
}

.kserv-auth-bar__menu-header {
	display: flex;
	align-items: center;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.kserv-auth-bar__menu-identity {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.kserv-auth-bar__menu-name {
	font-weight: 600;
	color: #111827;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kserv-auth-bar__menu-email {
	font-size: 12px;
	color: #6b7280;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kserv-auth-bar__menu-item {
	display: block;
	width: 100%;
	padding: 10px 16px;
	background: transparent;
	border: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.kserv-auth-bar__menu-item:hover,
.kserv-auth-bar__menu-item:focus-visible {
	background: rgba(0, 0, 0, 0.04);
	outline: none;
}
.kserv-auth-bar__menu-item--danger {
	color: #b91c1c;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* ------------------------------------------------
   Access Badge ([kserv_access_badge])
   ------------------------------------------------
   Inline indicator (lock by default) editors drop next to titles +
   links on landing pages to mark premium content. Server emits a
   hidden placeholder; JS un-hides + injects the SVG when the
   visitor lacks the post's required entitlements. Sized via
   --kserv-access-badge-size set inline by the shortcode (default
   16px); recolor via `color` on a parent.

   Default styling: inline-baseline with the text, currentColor fill,
   a small inline-margin so it doesn't crash into the headline glyph.
   Themes can override per-placement via the optional `class` shortcode
   attribute. */
.kserv-access-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	width: var(--kserv-access-badge-size, 16px);
	height: var(--kserv-access-badge-size, 16px);
	margin-inline: 0.25em;
	color: inherit;
	flex-shrink: 0;
	/* Pull up a hair — `middle` aligns to the parent's x-height middle,
	   which on large title fonts reads slightly low. */
	position: relative;
	top: -0.05em;
}
.kserv-access-badge svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ---- Overlay variant (.kserv-access-badge--overlay) -----------------
   Upper-right corner pill anchored to the nearest positioned ancestor
   (usually a card-image link wrapper). Theme integrators use this via
   `Kserv::accessBadgeMarkup( $post_id, [ 'class' => 'kserv-access-badge--overlay' ] )`.

   The icon size (--kserv-access-badge-size, defaults 16px) drives the
   inner glyph; the pill is padded around it. Dark scrim + white icon
   for legibility on arbitrary image backgrounds. */
:has(> .kserv-access-badge--overlay) {
	position: relative;
}
.kserv-access-badge--overlay {
	position: absolute;
	top: 8px;
	right: 8px;
	width: calc( var( --kserv-access-badge-size, 16px ) + 12px );
	height: calc( var( --kserv-access-badge-size, 16px ) + 12px );
	padding: 6px;
	box-sizing: border-box;
	background: rgba( 0, 0, 0, 0.65 );
	color: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.35 );
	margin-inline: 0;
	z-index: 2;
	pointer-events: none;
}

/* Inline spinner used by logout (and any future auth-bar action). */
.kserv-spinner {
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: kserv-spin 0.7s linear infinite;
	vertical-align: -0.15em;
}
@keyframes kserv-spin {
	to { transform: rotate(360deg); }
}

/* Busy state — suppress browser focus ring + inherited link underline
   while our loader is up. The element is in a transient processing
   state; interactive focus indicators are noise here, not affordance.
   `!important` because theme menu rules often have ID-level specificity
   (#menu-secondary-header-nav a:focus { text-decoration: underline }
   in astronomy-com, for example). */
[aria-busy="true"] {
	outline: none !important;
	text-decoration: none !important;
}

/* Menu items that the theme tags with `.kserv-login` / `.kserv-logout`
   so the plugin can toggle visibility on the body's auth-state class
   sometimes get a `display: flex` from the theme stylesheet (astronomy
   theme ships this in its compiled style-frontend.css). Flex throws
   off baseline alignment when the rest of the menu's <li>s use the
   default `list-item` — the auth link ends up a few pixels above
   sibling labels. Override with a higher-specificity rule that matches
   the default and keeps Login / Register vertically aligned with the
   other nav items. Plugin-side fix because we own the class semantic,
   and the theme dist isn't directly editable. */
body.kserv-logged-out li.kserv-login,
body.kserv-logged-in li.kserv-logout {
	display: list-item;
}

/* ============================================================
   Sign-in Bar variant catalog (the auto-rendered top utility strip)
   ------------------------------------------------------------
   Ported from docs/design_handoff_signin_bar with kserv- prefixes.
   One root class + variant + theme + density modifier:

     .kserv-signin-bar
       .kserv-signin-bar--{plain|anchored|split|pill|caps-tracked|single-trigger}
       .kserv-signin-bar--theme-{light,dark}
       .kserv-signin-bar--dens-{compact,comfortable}

   Per-host overrides on the root via inline style:
     style="--kserv-sb-bg:#fff; --kserv-sb-accent:#c8472f"

   See Component\AuthBarRenderer for the markup pattern.
   ============================================================ */

/* Light theme tokens */
.kserv-signin-bar.kserv-signin-bar--theme-light {
	--kserv-sb-bg: #f5f5f7;
	--kserv-sb-fg: #1a1a1f;
	--kserv-sb-fg-dim: #5a5a62;
	--kserv-sb-fg-ghost: #8a8a92;
	--kserv-sb-rule: #e0e0e4;
	--kserv-sb-border: #d4d4d8;
	--kserv-sb-border-strong: #1a1a1f;
	--kserv-sb-hover-fg: #000;
	--kserv-sb-pill-bg: #ffffff;
	--kserv-sb-pill-fg: #111111;
	--kserv-sb-avatar-bg: #111114;
	--kserv-sb-avatar-fg: #ffffff;
	--kserv-sb-accent: #c8472f;
	--kserv-sb-menu-shadow: 0 12px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.04);
}

/* Dark theme tokens */
.kserv-signin-bar.kserv-signin-bar--theme-dark {
	--kserv-sb-bg: #0f0f10;
	--kserv-sb-fg: #ececef;
	--kserv-sb-fg-dim: #9a9aa2;
	--kserv-sb-fg-ghost: #6a6a72;
	--kserv-sb-rule: #1f1f22;
	--kserv-sb-border: #2a2a30;
	--kserv-sb-border-strong: #ececef;
	--kserv-sb-hover-fg: #fff;
	--kserv-sb-pill-bg: #ececef;
	--kserv-sb-pill-fg: #0f0f10;
	--kserv-sb-avatar-bg: #ececef;
	--kserv-sb-avatar-fg: #0f0f10;
	--kserv-sb-accent: #f2a07a;
	--kserv-sb-menu-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
}

/* Root */
.kserv-signin-bar {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	background: var(--kserv-sb-bg);
	color: var(--kserv-sb-fg);
	border-bottom: 1px solid var(--kserv-sb-rule);
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-feature-settings: "cv11", "ss01";
	line-height: 1;
	user-select: none;
}

/* Push strip below the WP admin bar so it doesn't collide with WP chrome. */
.admin-bar .kserv-signin-bar { margin-top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .kserv-signin-bar { margin-top: 46px; }
}

/* Density */
.kserv-signin-bar.kserv-signin-bar--dens-compact      { height: 32px; padding: 0 24px; font-size: 12px; }
.kserv-signin-bar.kserv-signin-bar--dens-comfortable  { height: 44px; padding: 0 32px; font-size: 13px; }

/* Links & buttons (reset) */
.kserv-signin-bar a,
.kserv-signin-bar button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color .15s ease;
}
.kserv-signin-bar a:hover,
.kserv-signin-bar button:hover { color: var(--kserv-sb-hover-fg); }
.kserv-signin-bar a:focus-visible,
.kserv-signin-bar button:focus-visible {
	outline: 2px solid var(--kserv-sb-fg);
	outline-offset: 2px;
}

/* Color modifiers */
.kserv-signin-bar .kserv-sb-link        { color: var(--kserv-sb-fg); }
.kserv-signin-bar .kserv-sb-link-dim    { color: var(--kserv-sb-fg-dim); }
.kserv-signin-bar .kserv-sb-link-accent { color: var(--kserv-sb-accent); font-weight: 500; }

/* Static trigger — when the Account dropdown toggle is off, the
   signed-in trigger renders as plain inline text instead of a button.
   Drops button affordances (hover, cursor) but keeps the same
   alignment/spacing rhythm so layout doesn't reflow vs the button
   variant. Inherits color from the variant class it's combined with. */
.kserv-signin-bar .kserv-sb-static {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: default;
}
.kserv-signin-bar .kserv-sb-static:hover {
	color: inherit;
}

/* Static-pair — pairs the static trigger with its sibling log out
   button (with a hairline pipe between them) when the Account
   dropdown toggle is off. The pipe inherits the variant's pipe
   styling so visual rhythm matches the rest of the bar. */
.kserv-signin-bar .kserv-sb-static-pair {
	display: inline-flex;
	align-items: center;
}

/* Log out sibling — picks up the variant's link/pill class via the
   PHP renderer (e.g. `kserv-sb-link`, `kserv-sb-link kserv-sb-caps`).
   This class is just a hook for future per-variant overrides; the
   visual treatment comes from the inherited class. */
.kserv-signin-bar .kserv-sb-logout {
	background: transparent;
	border: 0;
	cursor: pointer;
}

/* Caps treatment (V5; reusable on any element) */
.kserv-signin-bar .kserv-sb-caps {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 600;
	font-size: 10.5px;
}
.kserv-signin-bar.kserv-signin-bar--dens-comfortable .kserv-sb-caps { font-size: 11px; }

/* Hairline pipe */
.kserv-signin-bar .kserv-sb-pipe {
	display: inline-block;
	width: 1px;
	height: 12px;
	background: var(--kserv-sb-border);
	margin: 0 14px;
	flex-shrink: 0;
}
.kserv-signin-bar.kserv-signin-bar--dens-compact .kserv-sb-pipe { height: 10px; margin: 0 10px; }

/* Outlined pill (V4) */
.kserv-signin-bar .kserv-sb-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	border: 1px solid var(--kserv-sb-border);
	background: transparent;
	color: var(--kserv-sb-fg);
	font-weight: 500;
	font-size: 12.5px;
	line-height: 1;
}
.kserv-signin-bar .kserv-sb-pill:hover {
	border-color: var(--kserv-sb-border-strong);
	color: var(--kserv-sb-hover-fg);
}
.kserv-signin-bar.kserv-signin-bar--dens-compact .kserv-sb-pill {
	padding: 5px 10px;
	font-size: 11.5px;
}

/* Solid pill variant (V6 panel) */
.kserv-signin-bar .kserv-sb-pill--solid {
	background: var(--kserv-sb-pill-bg);
	color: var(--kserv-sb-pill-fg);
	border-color: var(--kserv-sb-pill-bg);
}

/* Avatar (solid disc + sans initials) */
.kserv-signin-bar .kserv-sb-avatar {
	width: 24px;
	height: 24px;
	background: var(--kserv-sb-avatar-bg);
	color: var(--kserv-sb-avatar-fg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	border-radius: 50%;
	letter-spacing: 0;
	flex-shrink: 0;
}
.kserv-signin-bar.kserv-signin-bar--dens-compact .kserv-sb-avatar {
	width: 20px; height: 20px; font-size: 10px;
}

/* Outlined avatar ring + serif initial (V5) */
.kserv-signin-bar .kserv-sb-avatar-ring {
	width: 24px;
	height: 24px;
	border: 1.25px solid currentColor;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	font-size: 13px;
	font-weight: 600;
	border-radius: 50%;
	letter-spacing: 0;
	flex-shrink: 0;
	text-transform: none;
}
.kserv-signin-bar.kserv-signin-bar--dens-compact .kserv-sb-avatar-ring {
	width: 20px; height: 20px; font-size: 11px;
}

/* CSS-drawn chevron (no SVG / icon font) */
.kserv-signin-bar .kserv-sb-chev {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 1.25px solid currentColor;
	border-bottom: 1.25px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.55;
	margin-left: 2px;
}

/* Per-variant layout
   --------------------------------------------------------------------- */

/* All variants share the date-or-empty left slot + right group on the
   right. justify-content: space-between keeps the right group anchored
   to the right edge regardless of whether the left slot is the date or
   the empty spacer. */
.kserv-signin-bar--plain,
.kserv-signin-bar--anchored,
.kserv-signin-bar--split,
.kserv-signin-bar--pill,
.kserv-signin-bar--caps-tracked,
.kserv-signin-bar--single-trigger {
	justify-content: space-between;
	gap: 24px;
}
.kserv-signin-bar .kserv-sb-right { display: inline-flex; align-items: center; }
.kserv-signin-bar .kserv-sb-left  { display: inline-flex; align-items: center; }

/* Date stamp — base style (sentence case, dim ghost color). V5 overrides
   to caps-tracked editorial register. */
.kserv-signin-bar .kserv-sb-date {
	color: var(--kserv-sb-fg-ghost);
	white-space: nowrap;
}
.kserv-signin-bar--caps-tracked .kserv-sb-date {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 600;
	font-size: 10.5px;
}
.kserv-signin-bar--caps-tracked.kserv-signin-bar--dens-comfortable .kserv-sb-date { font-size: 11px; }

/* V4 · Pill — text peers group ahead of the pill. No pipes between
   them; the pill provides its own visual separation. */
.kserv-signin-bar--pill .kserv-sb-group {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding-right: 18px;
}
.kserv-signin-bar--pill.kserv-signin-bar--dens-compact .kserv-sb-group {
	padding-right: 14px;
}
.kserv-signin-bar--single-trigger .kserv-sb-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 320px;
	background: var(--kserv-sb-bg);
	border: 1px solid var(--kserv-sb-border);
	box-shadow: var(--kserv-sb-menu-shadow);
	padding: 22px;
	z-index: 50;
	text-align: left;
	cursor: default;
}
.kserv-signin-bar--single-trigger .kserv-sb-panel h4 {
	font-size: 13px; margin: 0 0 6px; font-weight: 600;
}
.kserv-signin-bar--single-trigger .kserv-sb-panel p {
	font-size: 12.5px; color: var(--kserv-sb-fg-dim);
	margin: 0 0 16px; line-height: 1.45;
}
.kserv-signin-bar--single-trigger .kserv-sb-row {
	display: flex; gap: 8px; margin-bottom: 14px;
}
.kserv-signin-bar--single-trigger .kserv-sb-row .kserv-sb-pill {
	flex: 1; justify-content: center;
}
.kserv-signin-bar--single-trigger .kserv-sb-tiny {
	border-top: 1px solid var(--kserv-sb-rule);
	padding-top: 14px;
	font-size: 12px;
	color: var(--kserv-sb-fg-dim);
}
.kserv-signin-bar--single-trigger .kserv-sb-tiny a {
	color: var(--kserv-sb-fg);
	font-weight: 500;
}

/* Account dropdown menu (V1–V5)
   --------------------------------------------------------------------- */

.kserv-signin-bar .kserv-sb-menu-host { position: relative; }
.kserv-signin-bar .kserv-sb-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	min-width: 240px;
	background: var(--kserv-sb-bg);
	border: 1px solid var(--kserv-sb-border);
	box-shadow: var(--kserv-sb-menu-shadow);
	z-index: 50;
	text-align: left;
	font-size: 13px;
	color: var(--kserv-sb-fg);
	cursor: default;
	/* sharp corners by design — no border-radius */
}
.kserv-signin-bar .kserv-sb-menu-head {
	padding: 14px 16px 12px;
	border-bottom: 1px solid var(--kserv-sb-rule);
}
.kserv-signin-bar .kserv-sb-menu-nm {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
}
.kserv-signin-bar .kserv-sb-menu-em {
	color: var(--kserv-sb-fg-dim);
	font-size: 12px;
	margin-top: 3px;
}
.kserv-signin-bar .kserv-sb-menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 16px;
	color: var(--kserv-sb-fg);
	cursor: pointer;
	transition: background .12s;
	text-decoration: none;
	width: 100%;
	text-align: left;
}
.kserv-signin-bar .kserv-sb-menu-item:hover { background: rgba(127,127,127,0.08); }
.kserv-signin-bar .kserv-sb-menu-sep {
	height: 1px;
	background: var(--kserv-sb-rule);
	margin: 4px 0;
}
.kserv-signin-bar .kserv-sb-menu-item--danger { color: var(--kserv-sb-fg-dim); }

/* Responsive */
@media (max-width: 767px) {
	.kserv-signin-bar--caps-tracked .kserv-sb-date { display: none; }
	.kserv-signin-bar--caps-tracked { justify-content: flex-end; }
	.kserv-signin-bar--split .kserv-sb-left { display: none; }
	.kserv-signin-bar--split { justify-content: flex-end; }
}
@media (max-width: 479px) {
	.kserv-signin-bar .kserv-sb-link-dim,
	.kserv-signin-bar .kserv-sb-link-dim + .kserv-sb-pipe { display: none; }
}