/**
 * Provatic Members — front-end styles.
 *
 * Scoped under .provatic-members-form / .provatic-members-mypage so we don't
 * leak into theme styles. Uses CSS custom properties so themes can override
 * (--provatic-brand, --provatic-radius, etc.).
 */

.provatic-members-form,
.provatic-members-login-card,
.provatic-members-signup-card,
.provatic-tier-restrict,
.provatic-tier-restrict-message {
	/* The site's own accent, with the old Provatic blue only as a last resort for a
	   theme that ships no palette. Hardcoded, this token painted OUR brand colour into
	   every customer's login form and paywall — the same defect templates already have
	   to work around by re-declaring --provatic-brand over the commerce blocks. */
	--provatic-brand: var(--wp--preset--color--accent, #497ae8);
	--provatic-brand-dark: var(--wp--preset--color--contrast, #3a63ba);
	--provatic-text: #1a202c;
	--provatic-text-muted: #6b7280;
	--provatic-border: #e2e4e9;
	--provatic-bg-subtle: #f7f8fa;
	--provatic-error: #c0392b;
	--provatic-success: #1e8e3e;
	--provatic-radius: 8px;

	max-width: 420px;
	margin: 0 auto;
	padding: 24px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--provatic-text);
}

/* `.provatic-members-mypage { max-width: 880px }` used to live here. It had matched
 * nothing since 2026-07-09 (e615b19), when the MyPage design system renamed the root
 * to `.provatic-mypage` and left this behind — so MyPage had no width at all, which
 * only showed where nothing else was holding it in (a template's `align:"full"`
 * band). The frame now lives with the rest of MyPage, in mypage-components.css.
 *
 * Removed rather than repointed: a dead rule that looks like the answer is worse than
 * no rule, because the next person fixes the width here and nothing happens. */

/* ─────────────────────────────────────────────────────────────
 * Login form COMPONENT.
 *
 * One canonical style block. Whatever the operator sees in the
 * Settings preview is exactly what renders on the [provatic_login]
 * page AND inside the header Login Button modal — no surface-specific
 * modifier classes, no context branches. Settings overrides arrive as
 * inline <style> emitted by Login_Form_Renderer::build_inline_css().
 * ───────────────────────────────────────────────────────────── */
.provatic-members-login-card,
.provatic-members-signup-card {
	background: #fff;
	border-radius: 12px;
	padding: 32px 28px 28px;
	/* Clamp in `width`, not `max-width`. A block theme's layout rule sets
	   max-width on the constrained child (820px on Canvas) and wins the cascade,
	   so the `max-width: 92vw` that used to sit here never applied — the card
	   stayed 380px inside a 390px viewport and pushed the page into horizontal
	   scroll. `width` is not contested by that rule. */
	width: min(380px, calc(100vw - 3rem));
	margin: 0 auto;
	box-sizing: border-box;
	box-shadow:
		0 8px 24px rgba(15, 23, 42, 0.10),
		0 2px 6px rgba(15, 23, 42, 0.04);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Blocks that render as SIBLINGS of the card, not inside it: the verification
   notice (above) and the "Didn't receive the verification email?" details
   (below). They had no width and no centring of their own, so they inherited
   whatever the host container was — flush to the viewport edge inside a
   marketplace preview, and ~220px left of the card on a normal page. Give them
   the card's exact footprint so the three read as one column. */
.provatic-members-notice,
.provatic-members-resend-verify {
	width: min(380px, calc(100vw - 3rem));
	margin-inline: auto;
	box-sizing: border-box;
}

/* The card already provides padding/max-width — neutralize the form's own
   layout properties when it's living inside one so they don't double-up. */
.provatic-members-login-card .provatic-members-form,
.provatic-members-signup-card .provatic-members-form {
	max-width: none;
	margin: 0;
	padding: 0;
}

.provatic-members-login-card .provatic-members-form-title,
.provatic-members-signup-card .provatic-members-form-title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
	color: #111827;
	text-align: center;
	letter-spacing: -0.01em;
}

.provatic-members-login-card .provatic-members-form-subtitle,
.provatic-members-signup-card .provatic-members-form-subtitle {
	margin: 0 0 22px;
	color: #6b7280;
	font-size: 13px;
	text-align: center;
	line-height: 1.5;
}

/* Form fields */
.provatic-members-form-field {
	margin-bottom: 16px;
}

.provatic-members-form-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: var(--provatic-text);
}

.provatic-members-form-field label .required {
	color: var(--provatic-error);
}

.provatic-members-form-field input[type="text"],
.provatic-members-form-field input[type="email"],
.provatic-members-form-field input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--provatic-border);
	border-radius: var(--provatic-radius);
	font-size: 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	background: #fff;
}

.provatic-members-form-field input:focus {
	outline: none;
	border-color: var(--provatic-text);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* Input with a leading adornment (e.g. the "@" username handle prefix). */
.provatic-members-input-affix {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--provatic-border);
	border-radius: var(--provatic-radius);
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.provatic-members-input-affix__prefix {
	display: flex;
	align-items: center;
	padding: 0 10px 0 12px;
	background: var(--provatic-surface-subtle, #f4f4f5);
	border-right: 1px solid var(--provatic-border);
	color: var(--provatic-text-muted, #71717a);
	font-size: 14px;
	user-select: none;
}
.provatic-members-input-affix input[type="text"] {
	flex: 1;
	min-width: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
.provatic-members-input-affix input[type="text"]:focus {
	border: 0;
	box-shadow: none;
}
.provatic-members-input-affix:focus-within {
	border-color: var(--provatic-text);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}
.provatic-members-field-hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--provatic-text-muted, #71717a);
}

/* Form row (remember + forgot password) */
.provatic-members-form-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: -4px 0 16px;
	font-size: 13px;
}

.provatic-members-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--provatic-text-muted);
}

.provatic-members-link {
	color: var(--provatic-brand);
	text-decoration: none;
}

.provatic-members-link:hover {
	text-decoration: underline;
}

/* Buttons */
.provatic-members-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	border: none;
	border-radius: var(--provatic-radius);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
	text-align: center;
}

.provatic-members-btn-primary {
	/* Monochrome CTA (Canvas design system) — matches the login form's inline
	   override and the theme's black button, so signup/mypage buttons are on-brand
	   instead of the addon's default blue. Brand blue stays for links/accents. */
	background: #18181b;
	color: #fff;
}

.provatic-members-btn-primary:hover:not(:disabled) {
	background: #000;
}

.provatic-members-btn-primary:disabled {
	background: var(--provatic-text-muted);
	cursor: not-allowed;
}

.provatic-members-btn-google {
	margin-top: 12px;
	background: #fff;
	color: var(--provatic-text);
	border: 1px solid var(--provatic-border);
	/* Inline-flex so the real Google SVG (rendered inside the button by
	   templates/login-form.php) sits cleanly next to the label. The fake
	   `::before { content: "G" }` placeholder that used to sit on the left
	   has been removed — the SVG provides the brand cue, the letter was
	   visual duplication. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.provatic-members-btn-google:hover:not(:disabled) {
	background: var(--provatic-bg-subtle);
}

/* Divider */
.provatic-members-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0;
	color: var(--provatic-text-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.provatic-members-divider::before,
.provatic-members-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--provatic-border);
}

/* Form intro / footer text */
.provatic-members-form-intro {
	margin-top: 0;
	margin-bottom: 20px;
	color: var(--provatic-text-muted);
}

.provatic-members-footer-link {
	margin-top: 20px;
	text-align: center;
	color: var(--provatic-text-muted);
	font-size: 13px;
}

.provatic-members-footer-link a {
	color: var(--provatic-brand);
	text-decoration: none;
}

/* Feedback messages */
.provatic-members-form-feedback {
	margin-top: 12px;
	padding: 0 12px;
	font-size: 13px;
	min-height: 1.2em;
}

.provatic-members-form-feedback.is-error {
	color: var(--provatic-error);
}

.provatic-members-form-feedback.is-success {
	color: var(--provatic-success);
}

/* Inline notice shown above the login/signup forms — typically by the
   email-verification callback returning ?provatic_verify_result=verified|expired|invalid. */
.provatic-members-notice {
	padding: 12px 16px;
	border-radius: var(--provatic-radius);
	margin-bottom: 16px;
	font-size: 14px;
}

.provatic-members-notice--success {
	background: #dcfce7;
	color: #15803d;
	border: 1px solid #86efac;
}

.provatic-members-notice--error {
	background: #fee2e2;
	color: #b91c1c;
	border: 1px solid #fca5a5;
}

.provatic-members-info {
	padding: 16px;
	background: var(--provatic-bg-subtle);
	border-radius: var(--provatic-radius);
	text-align: center;
	color: var(--provatic-text-muted);
}

/* ---- MyPage ---- */

.provatic-members-mypage-header h2 {
	margin: 0 0 24px;
	font-size: 24px;
	font-weight: 600;
	color: var(--provatic-text);
}

.provatic-members-mypage-tabs {
	display: flex;
	gap: 2px;
	border-bottom: 1px solid var(--provatic-border);
	margin-bottom: 24px;
}

.provatic-members-mypage-tab {
	padding: 12px 20px;
	color: var(--provatic-text-muted);
	text-decoration: none;
	font-weight: 500;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.provatic-members-mypage-tab:hover {
	color: var(--provatic-text);
}

.provatic-members-mypage-tab.is-active {
	color: var(--provatic-brand);
	border-bottom-color: var(--provatic-brand);
}

.provatic-members-profile h3 {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
}

.provatic-members-fields {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 12px 16px;
	margin: 0 0 24px;
}

.provatic-members-fields dt {
	font-weight: 500;
	color: var(--provatic-text-muted);
}

.provatic-members-fields dd {
	margin: 0;
	color: var(--provatic-text);
}

/* Not the profile menu's Log out: that one is a menu item and takes the item's look. This
   rule outranks the item's :where(), and --provatic-error is only defined inside the
   members card, so in a header it resolved to nothing and inherited the header's ink:
   white over a hero, invisible in the white dropdown (kikobana, 2026-10-16). */
.provatic-members-logout:not(.provatic-profile__item) {
	color: var(--provatic-error);
	text-decoration: none;
	font-size: 13px;
}

.provatic-members-logout:not(.provatic-profile__item):hover {
	text-decoration: underline;
}

/* Title/subtitle styles for login form now live inside the
   `.provatic-members-login-card` rules near the top of this file — that
   wrapper is the single source of truth across page / modal / preview. */

/* ==========================================================================
   Tier-restriction fallback card (Tier_Restrict)
   - Shown in place of gated content when the visitor doesn't meet the
     required tier. Used by both the [provatic_tier_restrict] shortcode
     and the post-meta whole-page gate.
   ========================================================================== */

/* Layout uses flex column + `gap` instead of per-child `margin-bottom`,
   so theme resets like `p { margin: 0 }` (common in Elementor/Astra)
   can't collapse our spacing. Button uses `line-height: 1` + fixed
   height + inline-flex center so the text glyph sits in the exact
   vertical center regardless of font baseline asymmetry.
   `!important` is used on the few rules where page-builder themes
   inject high-specificity overrides (`.elementor h3`, `a { color }`,
   button reset). */
.provatic-tier-restrict {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 48px 40px;
	margin: 32px auto;
	max-width: 480px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	box-sizing: border-box;
}
.provatic-tier-restrict > * {
	margin: 0 !important;
}
.provatic-tier-restrict-icon {
	font-size: 44px !important;
	line-height: 1 !important;
}
.provatic-tier-restrict-title {
	font-size: 20px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	color: #111827 !important;
}
.provatic-tier-restrict-text {
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: #6b7280 !important;
	max-width: 360px;
}
.provatic-tier-restrict-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
}
/* Single-line text: use the `line-height = height` trick instead of flex
   centering. Flex's cross-axis center aligns the line-box rather than the
   visible glyph, which on baseline-asymmetric fonts (most Korean web fonts —
   Pretendard, Noto Sans KR) renders visibly low even though the box itself
   is centered. line-height-equals-height makes single-line text deterministic
   regardless of font metrics or theme `vertical-align` injection. */
.provatic-tier-restrict-btn {
	display: inline-block !important;
	box-sizing: border-box !important;
	height: 48px !important;
	min-width: 130px;
	padding: 0 24px !important;
	margin: 0 !important;
	border-radius: 6px;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 46px !important; /* = height - (2 * border) */
	text-align: center !important;
	text-decoration: none !important;
	white-space: nowrap;
	vertical-align: middle !important;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.provatic-tier-restrict-btn--primary {
	background: var(--provatic-brand);
	color: #ffffff !important;
	border-color: var(--provatic-brand);
}
.provatic-tier-restrict-btn--primary:hover,
.provatic-tier-restrict-btn--primary:focus,
.provatic-tier-restrict-btn--primary:active {
	background: #3a66c9;
	border-color: #3a66c9;
	color: #ffffff !important;
}
.provatic-tier-restrict-btn--secondary {
	background: #ffffff;
	color: #374151 !important;
	border-color: #d1d5db;
}
.provatic-tier-restrict-btn--secondary:hover,
.provatic-tier-restrict-btn--secondary:focus,
.provatic-tier-restrict-btn--secondary:active {
	background: #f9fafb;
	color: #111827 !important;
}

/* "fallback=message" — plain inline notice without the full card.
   Bordered on all four sides like .provatic-tier-restrict above, not tabbed with a
   coloured bar down one edge. The two are the same message at two sizes and should
   look related; the bar also made this the only element in the addon that painted an
   accent slab on a customer's page. The copy carries the meaning. */
.provatic-tier-restrict-message {
	padding: 12px 16px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	color: #6b7280;
	font-size: 14px;
	margin: 16px 0;
}

/* Anti-spam honeypot — visually removed + off-screen so real users never see or
   fill it; naive bots that fill every field get caught server-side. */
.provatic-members-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Profile menu — a template's third menu, for the person who is signed in.
 *
 * GEOMETRY AND COLOUR ARE CUSTOM PROPERTIES, not literals, for the same reason
 * the theme toggle's are (components.css): this sits inside somebody else's
 * header, and one 28px circle with a 12px-radius white dropdown made every
 * commerce template's header end in the same widget. A template sets the tokens
 * in its own header CSS —
 *
 *     .nb-hdr__profile { --pv-profile-size: 32px; --pv-profile-radius: 6px;
 *                        --pv-profile-menu-radius: 0; --pv-profile-font: var(--wp--preset--font-family--space-mono) }
 *
 * — and nothing is added to the payload schema, so there is no new header config
 * key for the sanitizer to delete on the next save.
 *
 * Every rule is wrapped in `:where()`, which has ZERO specificity. A template
 * that would rather write the CSS itself than set a token wins with a single
 * class and no `!important`; the defaults below are exactly what every template
 * had before the tokens existed.
 *
 * The one thing a template must not lose is the circle. It is what makes this
 * read as a person rather than another nav item.
 * ──────────────────────────────────────────────────────────────────────── */
:where(.provatic-profile) { position: relative; display: inline-flex; }
:where(.provatic-profile__btn) {
	display: inline-flex;
	align-items: center;
	gap: var(--pv-profile-gap, 0);
	border: var(--pv-profile-btn-border, 0);
	padding: var(--pv-profile-btn-padding, 0);
	border-radius: var(--pv-profile-btn-radius, 0);
	background: var(--pv-profile-btn-bg, none);
	font-family: var(--pv-profile-font, inherit);
	font-size: inherit;
	color: inherit;
	line-height: 1;
	cursor: pointer;
}
:where(.provatic-profile__initial) {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: var(--pv-profile-size, 28px);
	height: var(--pv-profile-size, 28px);
	border-radius: var(--pv-profile-radius, 50%);
	border: var(--pv-profile-border, 0);
	font-family: var(--pv-profile-font, inherit);
	font-size: var(--pv-profile-letter-size, 0.78em);
	font-weight: var(--pv-profile-weight, 600);
	letter-spacing: var(--pv-profile-letter-spacing, normal);
	line-height: 1;
	/* The circle takes the header's ink and does NOT set its own color, so currentColor
	   here still means what the header meant by it. The letter sits in a child and sets
	   its own.
	 *
	 * Both shorter versions are wrong, and silently: `background: currentColor` beside
	 * `color: base` on one element paints white on white, because currentColor resolves
	 * against that element's OWN computed color. Hoisting the ink into a custom property on
	 * the button does not help either — a custom property holding `currentColor` is
	 * substituted as the keyword and resolved where it is USED, which is the same element
	 * again. Two elements is the fix, not a cleverer one.
	 *
	 * A template overriding --pv-profile-bg hits the same rule: give it a real colour or a
	 * palette var, never `currentColor`. */
	background: var(--pv-profile-bg, currentColor);
}
:where(.provatic-profile__letter) {
	color: var(--pv-profile-fg, var(--wp--preset--color--base, #fff));
}
/* The name is read out, not drawn: in a header beside a logo and a nav it was one noun
   too many, and it pushed the whole cluster around as it changed length. */
:where(.provatic-profile__name) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
:where(.provatic-profile__menu) {
	position: absolute;
	top: calc(100% + var(--pv-profile-menu-offset, 8px));
	right: 0;
	z-index: 50;
	min-width: var(--pv-profile-menu-min, 180px);
	padding: var(--pv-profile-menu-padding, 6px);
	border: var(--pv-profile-menu-border, 1px solid rgba(0, 0, 0, 0.08));
	border-radius: var(--pv-profile-menu-radius, 12px);
	background: var(--pv-profile-menu-bg, var(--wp--preset--color--base, #fff));
	box-shadow: var(--pv-profile-menu-shadow, 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.1));
	font-family: var(--pv-profile-menu-font, inherit);
	text-align: left;
}
/* Not in :where(): this is what the `hidden` attribute MEANS, and a template that
   restyles the menu must not be able to switch it on by accident. */
.provatic-profile__menu[hidden] { display: none; }
:where(.provatic-profile__item) {
	display: block;
	padding: var(--pv-profile-item-padding, 9px 12px);
	border-radius: var(--pv-profile-item-radius, 8px);
	color: var(--pv-profile-item-color, var(--wp--preset--color--contrast, #18181b));
	font-size: var(--pv-profile-item-size, 0.94rem);
	letter-spacing: var(--pv-profile-item-spacing, normal);
	text-transform: var(--pv-profile-item-transform, none);
	text-decoration: none;
	white-space: nowrap;
}
:where(.provatic-profile__item:hover),
:where(.provatic-profile__item:focus) { background: var(--pv-profile-item-hover, rgba(0, 0, 0, 0.05)); }
/* Log out is the last thing and a different kind of thing — it ends the session
   rather than going somewhere — so it is separated and stated quietly. */
:where(.provatic-profile__item--out) {
	margin-top: 4px;
	padding-top: 12px;
	border-top: var(--pv-profile-rule, 1px solid rgba(0, 0, 0, 0.08));
	border-radius: 0 0 var(--pv-profile-item-radius, 8px) var(--pv-profile-item-radius, 8px);
}