/*
 * Rynue Memberships — Frontend Base CSS
 *
 * Defines all :root custom property tokens and the full BEM component
 * library used on membership frontend pages (checkout, levels, account, …).
 *
 * No decoration here — shadows, hover effects, and brand flourishes live in
 * rynue-variation.css. This file is always required; rynue-variation.css is
 * skippable when a theme wants to provide its own styling.
 *
 * @since 1.0.0
 */

/* ─── Design tokens ─────────────────────────────────────────────────────────── */
:root {

	/* Colour */
	--rynue--color--base: #f8f6f2;
	--rynue--color--surface: #fff;
	--rynue--color--surface-raised: rgba(0, 0, 0, 0.02);
	--rynue--color--text-primary: #1a3548;
	--rynue--color--text-secondary: #3c4a56;
	--rynue--color--text-muted: #5f7080;  /* Darkened for WCAG AA 4.5:1 on base */
	--rynue--color--accent: #2b577d;
	--rynue--color--accent-hover: #1e3f5b;
	--rynue--color--accent-light: rgba(43, 87, 125, 0.08);
	--rynue--color--cta: #d4885c;
	--rynue--color--cta-hover: #c4784c;
	--rynue--color--border: #e0d8d0;
	--rynue--color--border-focus: #2b577d;
	--rynue--color--success: #3a8c5a;
	--rynue--color--success-light: rgba(58, 140, 90, 0.1);
	--rynue--color--warning: #c47a2c;
	--rynue--color--warning-light: rgba(212, 136, 92, 0.12);
	--rynue--color--error: #c04040;
	--rynue--color--error-light: rgba(192, 64, 64, 0.1);
	--rynue--color--error-border: rgba(192, 64, 64, 0.2);
	--rynue--color--surface-overlay: rgba(255, 255, 255, 0.2);

	/* Typography */
	--rynue--font--display: "Nunito", "Segoe UI", sans-serif;
	--rynue--font--ui: "Outfit", "Segoe UI", sans-serif;
	--rynue--font--body: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	--rynue--font--decorative: "Caveat", cursive;
	--rynue--font--reading: "Lora", "Georgia", serif;
	--rynue--font--mono: "JetBrains Mono", "Fira Code", "Courier New", monospace;

	--rynue--font-size--xs: 0.75rem;
	--rynue--font-size--sm: 0.875rem;
	--rynue--font-size--md: 1rem;
	--rynue--font-size--lg: 1.125rem;
	--rynue--font-size--xl: 1.25rem;
	--rynue--font-size--2xl: 1.5rem;

	/* Spacing */
	--rynue--space--xs: 0.375rem;
	--rynue--space--sm: 0.625rem;
	--rynue--space--md: 1rem;
	--rynue--space--lg: 1.5rem;
	--rynue--space--xl: 2rem;
	--rynue--space--2xl: 3rem;

	/* Shape */
	--rynue--border--radius: 8px;
	--rynue--border--radius--sm: 4px;
	--rynue--border--radius--lg: 12px;
	--rynue--border--radius--pill: 999px;

	/* Shadows */
	--rynue--shadow--sm: 1px 2px 8px  rgba(26, 53, 72, 0.05);
	--rynue--shadow--md: 4px 8px 24px rgba(26, 53, 72, 0.08);
	--rynue--shadow--lg: 8px 16px 48px rgba(26, 53, 72, 0.14);
	--rynue--shadow--focus: 0 0 0 3px rgba(43, 87, 125, 0.25);

	/* Transitions */
	--rynue--transition--fast: 0.15s ease;
	--rynue--transition--base: 0.25s ease;

	/* Texture */
	--rynue--texture--opacity: 0.025;
}

/* ─── Component root ─────────────────────────────────────────────────────────── */

/*
 * Provides brand typography and colour baseline for blocks and shortcodes
 * rendered without the full .rynue-page wrapper (block themes, widget areas,
 * or wherever a classic-theme page template is not used).
 */
.rynue {
	font-family: var(--rynue--font--body);
	color: var(--rynue--color--text-primary);
	line-height: 1.6;
}

.rynue a {
	color: var(--rynue--color--accent);
	text-decoration: none;
	transition: color var(--rynue--transition--fast);
}

.rynue a:hover {
	color: var(--rynue--color--cta);
	text-decoration: underline;
}

.rynue a:focus-visible {
	outline: none;
	box-shadow: var(--rynue--shadow--focus);
	border-radius: var(--rynue--border--radius--sm);
}

/* ─── Page wrapper ───────────────────────────────────────────────────────────── */
.rynue-page {
	background: var(--rynue--color--base);
	font-family: var(--rynue--font--body);
	color: var(--rynue--color--text-primary);
	line-height: 1.6;
	min-height: 50vh;
	padding: var(--rynue--space--xl) 0;
}

.rynue-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--rynue--space--lg) var(--rynue--space--md);
}

/* ─── Links ─────────────────────────────────────────────────────────────────── */
/* stylelint-disable-next-line no-descending-specificity */
.rynue-page a {
	color: var(--rynue--color--accent);
	text-decoration: none;
	transition: color var(--rynue--transition--fast);
}

.rynue-page a:hover {
	color: var(--rynue--color--cta);
	text-decoration: underline;
}

.rynue-page a:focus-visible {
	outline: none;
	box-shadow: var(--rynue--shadow--focus);
	border-radius: var(--rynue--border--radius--sm);
}

/* ─── Cards ──────────────────────────────────────────────────────────────────── */
.rynue-card {
	background: var(--rynue--color--surface);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius);
	padding: var(--rynue--space--lg);
}

/* ─── Buttons ────────────────────────────────────────────────────────────────── */
.rynue-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 10px var(--rynue--space--lg);
	border-radius: var(--rynue--border--radius);
	font-family: var(--rynue--font--ui);
	font-size: var(--rynue--font-size--sm);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	border: none;
	transition:
		background var(--rynue--transition--fast),
		box-shadow  var(--rynue--transition--fast),
		transform   var(--rynue--transition--fast);
	white-space: nowrap;
}

.rynue-btn:focus-visible {
	outline: none;
	box-shadow: var(--rynue--shadow--focus);
}

.rynue-btn--primary,
.rynue-btn--cta {
	background: var(--rynue--color--cta);
	color: var(--rynue--color--surface);
}

.rynue-btn--primary:hover,
.rynue-btn--cta:hover {
	background: var(--rynue--color--cta-hover);
	color: var(--rynue--color--surface);
	text-decoration: none;
}

.rynue-btn--secondary {
	background: var(--rynue--color--accent-light);
	color: var(--rynue--color--accent);
	border: 1px solid var(--rynue--color--border);
}

.rynue-btn--secondary:hover {
	background: var(--rynue--color--border);
	color: var(--rynue--color--accent);
	text-decoration: none;
}

.rynue-btn--danger {
	background: var(--rynue--color--error-light);
	color: var(--rynue--color--error);
	border: 1px solid var(--rynue--color--error-border);
}

.rynue-btn:active {
	transform: scale(0.98);
}

.rynue-btn--danger:hover {
	background: var(--rynue--color--error);
	color: var(--rynue--color--surface);
}

.rynue-btn[disabled],
.rynue-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.rynue-btn--sm {
	padding: 6px 14px;
	font-size: var(--rynue--font-size--sm);
}

/* ─── Form inputs ────────────────────────────────────────────────────────────── */
.rynue-input,
.rynue-select,
.rynue-textarea {
	display: block;
	width: 100%;
	padding: 10px 13px;
	background: var(--rynue--color--surface);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius);
	font-family: var(--rynue--font--body);
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-primary);
	line-height: 1.5;
	transition:
		border-color var(--rynue--transition--fast),
		box-shadow   var(--rynue--transition--fast);
	appearance: none;
	-webkit-appearance: none;
}

.rynue-input::placeholder,
.rynue-textarea::placeholder {
	color: var(--rynue--color--text-muted);
	opacity: 0.7;
}

.rynue-input:hover,
.rynue-select:hover,
.rynue-textarea:hover {
	border-color: var(--rynue--color--accent);
}

.rynue-input:focus,
.rynue-select:focus,
.rynue-textarea:focus {
	outline: none;
	border-color: var(--rynue--color--border-focus);
	box-shadow: var(--rynue--shadow--focus);
}

.rynue-input:disabled,
.rynue-select:disabled,
.rynue-textarea:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: var(--rynue--color--base);
}

.rynue-label {
	display: block;
	font-family: var(--rynue--font--ui);
	font-size: var(--rynue--font-size--sm);
	font-weight: 600;
	color: var(--rynue--color--text-primary);
	margin-bottom: var(--rynue--space--xs);
}

.rynue-field-group {
	margin-bottom: var(--rynue--space--lg);
}

.rynue-field-group--tos {
	margin-top: var(--rynue--space--sm);
}

.rynue-field-group__checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: var(--rynue--space--xs);
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-secondary);
	cursor: pointer;
	line-height: 1.4;
}

.rynue-field-group__checkbox-label input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 2px;
	accent-color: var(--rynue--color--accent);
}

/* stylelint-disable-next-line no-descending-specificity */
.rynue-field-group__checkbox-label a {
	color: var(--rynue--color--accent);
	text-decoration: underline;
}

.rynue-description {
	font-size: var(--rynue--font-size--xs);
	color: var(--rynue--color--text-muted);
	margin-top: var(--rynue--space--xs);
}

/* ─── Notices ────────────────────────────────────────────────────────────────── */
.rynue-notice {
	padding: var(--rynue--space--sm) var(--rynue--space--md);
	border-radius: var(--rynue--border--radius);
	border-left: 4px solid currentcolor;
	font-size: var(--rynue--font-size--sm);
	margin-bottom: var(--rynue--space--md);
}

.rynue-notice--success {
	background: var(--rynue--color--success-light);
	color: var(--rynue--color--success);
}

.rynue-notice--warning {
	background: var(--rynue--color--warning-light);
	color: var(--rynue--color--warning);
}

.rynue-notice--error {
	background: var(--rynue--color--error-light);
	color: var(--rynue--color--error);
}

.rynue-notice--info {
	background: var(--rynue--color--accent-light);
	color: var(--rynue--color--accent);
}

/* ─── Checkout form ──────────────────────────────────────────────────────────── */
.rynue-checkout {
	display: grid;
	gap: var(--rynue--space--lg);
}

.rynue-checkout__section {
	background: var(--rynue--color--surface);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius);
	padding: var(--rynue--space--lg);
}

.rynue-checkout__section-title {
	font-family: var(--rynue--font--display);
	font-size: var(--rynue--font-size--lg);
	font-weight: 700;
	color: var(--rynue--color--text-primary);
	margin: 0 0 var(--rynue--space--md);
}

.rynue-checkout__form {
	display: grid;
	gap: var(--rynue--space--lg);
}

.rynue-checkout__fieldset {
	background: var(--rynue--color--surface);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius);
	padding: var(--rynue--space--lg);
	margin: 0;
}

.rynue-checkout__legend {
	font-family: var(--rynue--font--display);
	font-size: var(--rynue--font-size--lg);
	font-weight: 700;
	color: var(--rynue--color--text-primary);
	padding: 0 var(--rynue--space--xs);
}

.rynue-checkout__discount {
	margin-bottom: var(--rynue--space--md);
}

.rynue-checkout__discount-row {
	display: flex;
	gap: var(--rynue--space--xs);
	align-items: stretch;
	margin-top: var(--rynue--space--xs);
}

.rynue-checkout__discount-row .rynue-input {
	flex: 1 1 auto;
	min-width: 0;
}

.rynue-checkout__discount-row .rynue-btn--sm {
	flex: 0 0 auto;
	padding-inline: var(--rynue--space--md);
	white-space: nowrap;
}

/* Discount feedback state message (below the input row). */
.rynue-discount-feedback {
	display: block;
	margin-top: var(--rynue--space--xs);
	font-size: var(--rynue--font-size--sm);
	min-height: 1.4em;
}

.rynue-discount-feedback:empty {
	display: none;
}

.rynue-discount-feedback--valid {
	color: var(--rynue--color--success);
}

.rynue-discount-feedback--invalid {
	color: var(--rynue--color--error);
}

/* Loading spinner via CSS animation (no additional markup). */
.rynue-discount-feedback--loading {
	color: var(--rynue--color--text-muted);
	padding-inline-start: 1.4em;
	position: relative;
}

.rynue-discount-feedback--loading::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 1em;
	height: 1em;
	margin-top: -0.5em;
	border: 2px solid var(--rynue--color--border);
	border-top-color: var(--rynue--color--accent);
	border-radius: 50%;
	animation: rynue-spin 0.6s linear infinite;
}

@keyframes rynue-spin {

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

.rynue-checkout__submit {
	margin-top: var(--rynue--space--sm);
}

.rynue-checkout__submit .rynue-btn {
	width: 100%;
	padding: 14px;
	font-size: var(--rynue--font-size--md);
}

.rynue-form-row--two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rynue--space--md);
}

.rynue-required {
	color: var(--rynue--color--error);
	margin-left: 2px;
}

/* ─── Checkout button variant ───────────────────────────────────────────────── */
.rynue-btn--checkout {
	font-size: var(--rynue--font-size--md);
	font-weight: 700;
	letter-spacing: 0.3px;
}

/* ─── Field sections (shipping, billing subsections) ────────────────────────── */
.rynue-field-section {
	margin-bottom: var(--rynue--space--lg);
}

.rynue-field-section__title {
	font-family: var(--rynue--font--display);
	font-size: var(--rynue--font-size--md);
	font-weight: 700;
	color: var(--rynue--color--text-primary);
	margin: 0 0 var(--rynue--space--md);
	padding-bottom: var(--rynue--space--sm);
	border-bottom: 1px solid var(--rynue--color--border);
}

.rynue-field-row {
	display: grid;
	gap: var(--rynue--space--md);
	margin-bottom: var(--rynue--space--md);
}

.rynue-field-row--three-col {
	grid-template-columns: 1fr 1fr 1fr;
}

.rynue-form {
	display: grid;
	gap: var(--rynue--space--md);
}

.rynue-input--small {
	max-width: 160px;
	padding: 6px 10px;
	font-size: var(--rynue--font-size--xs);
}

/* ─── Restricted content ────────────────────────────────────────────────────── */
.rynue-restricted {
	background: var(--rynue--color--accent-light);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius);
	padding: var(--rynue--space--xl);
	text-align: center;
	color: var(--rynue--color--text-secondary);
}

.rynue-restricted .rynue-btn {
	margin-top: var(--rynue--space--md);
}

/* ─── Cancel page ───────────────────────────────────────────────────────────── */
.rynue-cancel {
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
}

.rynue-cancel form {
	display: flex;
	gap: var(--rynue--space--md);
	justify-content: center;
	margin-top: var(--rynue--space--lg);
	flex-wrap: wrap;
}

.rynue-cancel--success {
	padding: var(--rynue--space--xl);
}

/* ─── Gift levels (checkout) ────────────────────────────────────────────────── */
.rynue-gift-option {
	margin-bottom: var(--rynue--space--md);
}

.rynue-gift-option label {
	display: inline-flex;
	align-items: center;
	gap: var(--rynue--space--xs);
	cursor: pointer;
	font-size: var(--rynue--font-size--sm);
	font-weight: 500;
}

.rynue-gift-notice {
	font-style: italic;
}

.rynue-gift-redemption-form {
	max-width: 400px;
}

.rynue-gift-redemption-form input[type="text"] {
	margin-bottom: var(--rynue--space--sm);
}

/* ─── Shipping fields (checkout) ────────────────────────────────────────────── */
.rynue-shipping-section {
	margin-top: var(--rynue--space--lg);
}

.rynue-shipping-form__message {
	font-size: var(--rynue--font-size--sm);
	margin-top: var(--rynue--space--sm);
}

/* ─── VAT field (checkout) ──────────────────────────────────────────────────── */
.rynue-vat-field {
	margin-bottom: var(--rynue--space--md);
}

/* ─── Affiliate section (account) ───────────────────────────────────────────── */
.rynue-affiliates-section {
	margin-top: var(--rynue--space--lg);
}

.rynue-affiliate-link-wrap {
	margin-bottom: var(--rynue--space--md);
}

.rynue-affiliate-link-row {
	display: flex;
	gap: var(--rynue--space--sm);
	align-items: center;
}

.rynue-affiliate-link-row input {
	flex: 1;
}

.rynue-affiliate-summary {
	margin-top: var(--rynue--space--md);
}

.rynue-affiliate-summary ul {
	list-style: none;
	padding: 0;
	margin: var(--rynue--space--sm) 0 0;
}

.rynue-affiliate-summary li {
	padding: var(--rynue--space--xs) 0;
	border-bottom: 1px solid var(--rynue--color--border);
	font-size: var(--rynue--font-size--sm);
}

/* ─── Membership levels grid ─────────────────────────────────────────────────── */
.rynue-levels {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--rynue--space--lg);
}

.rynue-levels--list {
	grid-template-columns: 1fr;
}

/* Default grid layout (explicit selector to satisfy CSS audit) */
.rynue-levels--grid {

	/* Inherits the default grid-template-columns from .rynue-levels */
}

.rynue-levels--list .rynue-level-card {
	text-align: left;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
}

/* stylelint-disable-next-line no-descending-specificity */
.rynue-level-card {
	border-radius: var(--rynue--border--radius--lg);
	padding: var(--rynue--space--xl);
	display: flex;
	flex-direction: column;
	gap: var(--rynue--space--md);
	text-align: center;
	transition:
		box-shadow var(--rynue--transition--fast),
		transform var(--rynue--transition--fast),
		border-color var(--rynue--transition--fast);
}

.rynue-level-card:hover {
	box-shadow: var(--rynue--shadow--md);
	transform: translateY(-1px) rotate(-0.3deg);
	border-color: var(--rynue--color--accent);
}

.rynue-level-card.is-featured,
.rynue-level-card--highlighted {
	border-color: var(--rynue--color--cta);
	position: relative;
}

.rynue-level-card__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--rynue--color--cta);
	color: var(--rynue--color--surface);
	font-size: var(--rynue--font-size--xs);
	font-weight: 700;
	padding: 4px 14px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.rynue-level-card__cost {
	font-size: var(--rynue--font-size--2xl);
	font-weight: 700;
	color: var(--rynue--color--accent);
}

.rynue-level-card__name {
	font-family: var(--rynue--font--display);
	font-size: var(--rynue--font-size--xl);
	font-weight: 800;
	color: var(--rynue--color--text-primary);
	margin: 0;
}

.rynue-level-card__price {
	font-size: var(--rynue--font-size--2xl);
	font-weight: 700;
	color: var(--rynue--color--accent);
}

.rynue-level-card__price small {
	font-size: var(--rynue--font-size--sm);
	font-weight: 400;
	color: var(--rynue--color--text-muted);
}

.rynue-level-card__description {
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-secondary);
	flex: 1;
}

.rynue-level-card__cta {
	width: 100%;
}

.rynue-level-card__cta--closed {
	cursor: default;
	opacity: 0.6;
	pointer-events: none;
}

/* ─── Account dashboard ──────────────────────────────────────────────────────── */
.rynue-account {
	display: grid;
	gap: var(--rynue--space--lg);
}

.rynue-account__section,
.rynue-account-section {
	background: var(--rynue--color--surface);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius);
	padding: var(--rynue--space--lg);
}

.rynue-account__section-title {
	font-family: var(--rynue--font--display);
	font-size: var(--rynue--font-size--lg);
	font-weight: 700;
	margin: 0 0 var(--rynue--space--md);
	padding-bottom: var(--rynue--space--sm);
	border-bottom: 1px solid var(--rynue--color--border);
}

/* ─── Invoice ────────────────────────────────────────────────────────────────── */
.rynue-invoice {
	background: var(--rynue--color--surface);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius);
	padding: var(--rynue--space--xl);
	max-width: 640px;
	margin: 0 auto;
}

.rynue-invoice__header {
	border-bottom: 1px solid var(--rynue--color--border);
	padding-bottom: var(--rynue--space--md);
	margin-bottom: var(--rynue--space--md);
}

.rynue-invoice__title {
	font-family: var(--rynue--font--display);
	font-size: var(--rynue--font-size--2xl);
	font-weight: 800;
	margin: 0 0 var(--rynue--space--xs);
}

.rynue-invoice__table {
	width: 100%;
	border-collapse: collapse;
}

.rynue-invoice__table th,
.rynue-invoice__table td {
	padding: var(--rynue--space--sm) 0;
	border-bottom: 1px solid var(--rynue--color--border);
}

.rynue-invoice__table th {
	text-align: left;
	font-weight: 600;
	color: var(--rynue--color--text-secondary);
}

.rynue-invoice__table td {
	text-align: right;
}

.rynue-invoice__total th,
.rynue-invoice__total td {
	font-weight: 700;
	font-size: var(--rynue--font-size--lg);
	color: var(--rynue--color--text-primary);
	border-bottom: none;
}

.rynue-invoice__code,
.rynue-invoice__date {
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-muted);
	margin: var(--rynue--space--xs) 0 0;
}

.rynue-invoice__body {
	margin-bottom: var(--rynue--space--lg);
}

.rynue-invoice__footer {
	padding-top: var(--rynue--space--md);
	border-top: 1px solid var(--rynue--color--border);
	text-align: center;
}

/* ─── Login form ─────────────────────────────────────────────────────────────── */
.rynue-login {
	max-width: 440px;
	margin: 0 auto;
}

.rynue-login .rynue-card {
	padding: var(--rynue--space--xl);
}

.rynue-login__links {
	margin-top: var(--rynue--space--md);
	font-size: var(--rynue--font-size--sm);
	text-align: center;
}

.rynue-login__logged-in {
	text-align: center;
	color: var(--rynue--color--text-muted);
}

.rynue-page--login .rynue-container {
	max-width: 440px;
}

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

	.rynue-levels {
		grid-template-columns: 1fr;
	}

	.rynue-checkout__section,
	.rynue-checkout__fieldset {
		padding: var(--rynue--space--md);
	}

	.rynue-form-row--two-col,
	.rynue-field-row--two-col,
	.rynue-field-row--three-col {
		grid-template-columns: 1fr;
	}

	.rynue-btn {
		min-height: 44px;
		padding: 10px var(--rynue--space--md);
	}

	.rynue-invoice__table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 480px) {

	.rynue-container {
		padding-left: var(--rynue--space--sm);
		padding-right: var(--rynue--space--sm);
	}

	.rynue-checkout__section {
		padding: var(--rynue--space--sm);
		border-radius: var(--rynue--border--radius--sm);
	}

	.rynue-checkout__section-title {
		font-size: var(--rynue--font-size--md);
	}

	.rynue-level-card {
		padding: var(--rynue--space--lg);
	}
}

/* ─── Member directory ───────────────────────────────────────────────────────── */
.rynue-directory {
	display: grid;
	gap: var(--rynue--space--lg);
}

.rynue-directory__search {
	display: flex;
	gap: var(--rynue--space--sm);
	margin-bottom: var(--rynue--space--md);
}

.rynue-directory__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--rynue--space--lg);
}

.rynue-directory__card {
	background: var(--rynue--color--surface);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius);
	padding: var(--rynue--space--lg);
	display: flex;
	gap: var(--rynue--space--md);
	align-items: flex-start;
}

.rynue-directory__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	flex-shrink: 0;
}

.rynue-directory__info {
	flex: 1;
	min-width: 0;
}

.rynue-directory__name {
	font-family: var(--rynue--font--display);
	font-weight: 700;
	color: var(--rynue--color--text-primary);
	margin: 0 0 var(--rynue--space--xs);
}

.rynue-directory__field {
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-muted);
}

.rynue-directory__pagination {
	display: flex;
	gap: var(--rynue--space--xs);
	justify-content: center;
	padding-top: var(--rynue--space--md);
}

.rynue-pagination__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--rynue--space--sm);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius--sm);
	color: var(--rynue--color--text-secondary);
	text-decoration: none;
	font-size: var(--rynue--font-size--sm);
}

.rynue-pagination__page--active {
	background: var(--rynue--color--accent);
	border-color: var(--rynue--color--accent);
	color: var(--rynue--color--surface);
}

/* ─── Membership card ───────────────────────────────────────────────────────── */
.rynue-membership-card {
	background: var(--rynue--color--surface);
	border: 2px solid var(--rynue--color--accent);
	border-radius: var(--rynue--border--radius--lg);
	overflow: hidden;
	max-width: 420px;
}

.rynue-membership-card__header {
	background: var(--rynue--color--accent);
	color: var(--rynue--color--surface);
	padding: var(--rynue--space--md) var(--rynue--space--lg);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.rynue-membership-card__site {
	font-family: var(--rynue--font--display);
	font-weight: 700;
	font-size: var(--rynue--font-size--sm);
}

.rynue-membership-card__badge {
	font-size: var(--rynue--font-size--xs);
	background: var(--rynue--color--surface-overlay);
	padding: 2px var(--rynue--space--xs);
	border-radius: var(--rynue--border--radius--pill);
}

.rynue-membership-card__body {
	padding: var(--rynue--space--lg);
	display: flex;
	gap: var(--rynue--space--md);
	align-items: center;
}

.rynue-membership-card__avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex-shrink: 0;
}

.rynue-membership-card__details {
	flex: 1;
	min-width: 0;
}

.rynue-membership-card__name {
	font-family: var(--rynue--font--display);
	font-weight: 700;
	font-size: var(--rynue--font-size--lg);
	color: var(--rynue--color--text-primary);
	margin: 0;
}

.rynue-membership-card__level {
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--accent);
	font-weight: 600;
}

.rynue-membership-card__expiry {
	font-size: var(--rynue--font-size--xs);
	color: var(--rynue--color--text-muted);
}

.rynue-membership-card__footer {
	padding: var(--rynue--space--sm) var(--rynue--space--lg);
	border-top: 1px solid var(--rynue--color--border);
	text-align: center;
	font-size: var(--rynue--font-size--xs);
	color: var(--rynue--color--text-muted);
}

/* ─── Goal progress bar ─────────────────────────────────────────────────────── */
.rynue-goal {
	display: grid;
	gap: var(--rynue--space--sm);
}

.rynue-goal__label {
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-secondary);
	display: flex;
	justify-content: space-between;
}

.rynue-goal__bar {
	height: 12px;
	background: var(--rynue--color--border);
	border-radius: var(--rynue--border--radius--pill);
	overflow: hidden;
}

.rynue-goal__fill {
	height: 100%;
	background: var(--rynue--color--accent);
	border-radius: var(--rynue--border--radius--pill);
	transition: width 0.6s ease;
}

.rynue-goal--reached .rynue-goal__fill {
	background: var(--rynue--color--success);
}

/* ─── Events list ───────────────────────────────────────────────────────────── */
.rynue-events {
	display: grid;
	gap: var(--rynue--space--lg);
}

.rynue-events-empty {
	text-align: center;
	padding: var(--rynue--space--2xl);
	color: var(--rynue--color--text-muted);
}

.rynue-event {
	background: var(--rynue--color--surface);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius);
	display: flex;
	gap: var(--rynue--space--lg);
	overflow: hidden;
}

.rynue-event__thumbnail {
	width: 200px;
	min-height: 140px;
	object-fit: cover;
	flex-shrink: 0;
}

.rynue-event__content {
	padding: var(--rynue--space--lg);
	flex: 1;
	display: grid;
	gap: var(--rynue--space--xs);
}

.rynue-event__title {
	font-family: var(--rynue--font--display);
	font-size: var(--rynue--font-size--lg);
	font-weight: 700;
	color: var(--rynue--color--text-primary);
	margin: 0;
}

.rynue-event__date,
.rynue-event__location,
.rynue-event__capacity {
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-muted);
}

.rynue-event__label {
	font-weight: 600;
	color: var(--rynue--color--text-secondary);
}

.rynue-event__excerpt {
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-secondary);
}

.rynue-event__read-more {
	font-size: var(--rynue--font-size--sm);
	font-weight: 600;
	color: var(--rynue--color--accent);
	text-decoration: none;
}

/* ─── Addon packages grid ───────────────────────────────────────────────────── */
.rynue-addons-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--rynue--space--lg);
}

.rynue-addons-empty {
	text-align: center;
	padding: var(--rynue--space--2xl);
	color: var(--rynue--color--text-muted);
}

.rynue-addon-card {
	background: var(--rynue--color--surface);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.rynue-addon-card__thumbnail {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.rynue-addon-card__body {
	padding: var(--rynue--space--lg);
	flex: 1;
}

.rynue-addon-card__title {
	font-family: var(--rynue--font--display);
	font-weight: 700;
	font-size: var(--rynue--font-size--lg);
	color: var(--rynue--color--text-primary);
	margin: 0 0 var(--rynue--space--sm);
}

.rynue-addon-card__excerpt {
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-secondary);
}

.rynue-addon-card__footer {
	padding: var(--rynue--space--md) var(--rynue--space--lg);
	border-top: 1px solid var(--rynue--color--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.rynue-addon-card__price {
	font-weight: 700;
	font-size: var(--rynue--font-size--lg);
	color: var(--rynue--color--accent);
}

.rynue-addon-card__buy-btn {
	font-size: var(--rynue--font-size--sm);
}

/* ─── Signup shortcode ──────────────────────────────────────────────────────── */
.rynue-signup-form {
	max-width: 480px;
	display: grid;
	gap: var(--rynue--space--md);
}

@media (max-width: 600px) {

	.rynue-event {
		flex-direction: column;
	}

	.rynue-event__thumbnail {
		width: 100%;
		height: 160px;
	}

	.rynue-directory__grid {
		grid-template-columns: 1fr;
	}

	.rynue-addons-grid {
		grid-template-columns: 1fr;
	}
}

/* ─── Text colour utilities ──────────────────────────────────────────────────── */
.rynue-text--error {
	color: var(--rynue--color--error);
}

.rynue-text--success {
	color: var(--rynue--color--success);
}

.rynue-text--warning {
	color: var(--rynue--color--warning);
}

.rynue-text--muted {
	color: var(--rynue--color--text-muted);
}

/* ─── Page title ────────────────────────────────────────────────────────────── */
.rynue-page__title {
	font-family: var(--rynue--font--display);
	font-size: var(--rynue--font-size--2xl);
	font-weight: 800;
	color: var(--rynue--color--text-primary);
	margin: 0 0 var(--rynue--space--lg);
}

/* ─── Billing ────────────────────────────────────────────────────────────────── */
.rynue-billing {
	max-width: 640px;
}

.rynue-billing__title {
	font-family: var(--rynue--font--display);
	font-size: var(--rynue--font-size--xl);
	font-weight: 700;
	margin: 0 0 var(--rynue--space--lg);
}

.rynue-billing__form {
	max-width: 640px;
}

/* ─── Account membership info (default renderer) ───────────────────────────── */
.rynue-account-membership-info {
	display: flex;
	flex-direction: column;
	gap: var(--rynue--space--xs);
}

.rynue-account-membership-info p {
	margin: 0;
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-secondary);
}

.rynue-account-membership-info__level strong {
	font-size: var(--rynue--font-size--md);
	color: var(--rynue--color--text-primary);
}

.rynue-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: var(--rynue--font-size--xs);
	font-weight: 600;
	text-transform: capitalize;
	background: var(--rynue--color--accent-light);
	color: var(--rynue--color--accent);
}

.rynue-badge--active {
	background: var(--rynue--color--success-light);
	color: var(--rynue--color--success);
}

.rynue-badge--expired {
	background: var(--rynue--color--error-light);
	color: var(--rynue--color--error);
}

.rynue-badge--cancelled {
	background: var(--rynue--color--border);
	color: var(--rynue--color--text-muted);
}

.rynue-badge--pending {
	background: var(--rynue--color--warning-light);
	color: var(--rynue--color--warning);
}

/* ─── Confirmation ──────────────────────────────────────────────────────────── */
.rynue-confirmation {
	text-align: center;
	padding: var(--rynue--space--xl);
}

.rynue-confirmation__title {
	font-family: var(--rynue--font--display);
	font-size: var(--rynue--font-size--2xl);
	font-weight: 800;
	color: var(--rynue--color--success);
	margin: 0 0 var(--rynue--space--md);
}

.rynue-confirmation__level {
	font-size: var(--rynue--font-size--lg);
	font-weight: 700;
	color: var(--rynue--color--text-primary);
	margin: 0 0 var(--rynue--space--sm);
}

.rynue-confirmation__summary {
	text-align: left;
	margin: var(--rynue--space--md) auto var(--rynue--space--lg);
	max-width: 380px;
}

.rynue-confirmation__details {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--rynue--space--xs) var(--rynue--space--md);
	margin: 0;
	padding: var(--rynue--space--md);
	background: var(--rynue--color--surface);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius);
}

.rynue-confirmation__details dt {
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-muted);
	font-weight: 600;
}

.rynue-confirmation__details dd {
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-primary);
	margin: 0;
}

/* ─── Checkout name fields ──────────────────────────────────────────────────── */
.rynue-checkout-name-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rynue--space--md);
}

@media (max-width: 480px) {

	.rynue-checkout-name-fields {
		grid-template-columns: 1fr;
	}
}

/* ─── Print styles ───────────────────────────────────────────────────────────── */
@media print {

	.rynue-invoice__print,
	.rynue-sidebar,
	.rynue-admin-bar {
		display: none;
	}

	.rynue-page {
		background: var(--rynue--color--surface);
		padding: 0;
	}

	.rynue-invoice {
		border: none;
		box-shadow: none;
		page-break-inside: avoid;
	}

	.rynue-invoice__table thead {
		display: table-header-group;
	}

	.rynue-invoice__table tr {
		page-break-inside: avoid;
	}

	.rynue-invoice a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		color: var(--rynue--color--text-muted);
	}
}

/* ─── Gateway redirect / check notice ─────────────────────────────────── */
.rynue-gateway-notice {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--rynue--color--surface);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius);
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-muted);
	line-height: 1.5;
}

.rynue-gateway-notice__icon {
	font-size: 1.1rem;
	flex-shrink: 0;
}

/* ─── Checkout card fields row ─────────────────────────────────────────── */
.rynue-card-fields-row {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.rynue-card-fields-row .rynue-field-group {
	flex: 1 1 80px;
	min-width: 80px;
}

.rynue-input--sm {
	max-width: 120px;
}

/* ─── Stripe card element mount point ────────────────────────────────────── */
.rynue-stripe-card-element {
	padding: 12px 13px;
	min-height: 44px;
}

/* ─── Account page — name / email / membership info ─────────────────────── */
.rynue-account__name {
	font-size: var(--rynue--font-size--lg);
	font-weight: 700;
	color: var(--rynue--color--text-primary);
	margin: 0 0 var(--rynue--space--xs);
}

.rynue-account__email {
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-muted);
	margin: 0;
}

.rynue-account-membership-info__level {
	font-weight: 600;
	color: var(--rynue--color--text-primary);
	margin: 0 0 var(--rynue--space--xs);
}

.rynue-account-membership-info__status {
	font-size: var(--rynue--font-size--sm);
	margin: 0 0 var(--rynue--space--xs);
}

.rynue-account-membership-info__date {
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-muted);
	margin: 0 0 var(--rynue--space--xs);
}

.rynue-account-membership-info__billing {
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-muted);
	margin: 0;
}

.rynue-account-membership-info__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rynue--space--sm);
	margin-top: var(--rynue--space--md);
	padding-top: var(--rynue--space--md);
	border-top: 1px solid var(--rynue--color--border);
}

/* ─── Card title (shared admin/frontend component) ───────────────────────── */
.rynue-card__title {
	font-family: var(--rynue--font--display);
	font-size: var(--rynue--font-size--lg);
	font-weight: 700;
	color: var(--rynue--color--text-primary);
	margin: 0 0 var(--rynue--space--md);
	padding-bottom: var(--rynue--space--sm);
	border-bottom: 1px solid var(--rynue--color--border);
}

/* ─── Generic data table (shared admin/frontend component) ───────────────── */
.rynue-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--rynue--font-size--sm);
}

.rynue-table th,
.rynue-table td {
	text-align: left;
	padding: var(--rynue--space--sm) var(--rynue--space--md);
	border-bottom: 1px solid var(--rynue--color--border);
}

.rynue-table th {
	font-weight: 600;
	color: var(--rynue--color--text-muted);
	font-size: var(--rynue--font-size--xs);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.rynue-table tbody tr:hover {
	background: var(--rynue--color--surface-raised, rgba(0, 0, 0, 0.02));
}

/* ─── Form submit row (shared admin/frontend component) ──────────────────── */
.rynue-submit-wrap {
	display: flex;
	align-items: center;
	gap: var(--rynue--space--md);
	margin-top: var(--rynue--space--xl);
	padding-top: var(--rynue--space--md);
	border-top: 1px solid var(--rynue--color--border);
}

/* ─── Notice variant aliases ─────────────────────────────────────────────── */

/* rynue-notice-info: corrected BEM alias for rynue-notice--info */
.rynue-notice-info {
	background: var(--rynue--color--accent-light);
	color: var(--rynue--color--accent);
	border-left: 3px solid var(--rynue--color--accent);
}

/* ─── Proration notice ───────────────────────────────────────────────────── */
.rynue-proration-notice {
	margin: var(--rynue--space--md) 0;
	padding: var(--rynue--space--sm) var(--rynue--space--md);
	border-radius: var(--rynue--border--radius);
}

/* ─── Level option (proration level selector) ────────────────────────────── */
.rynue-level-option {
	display: flex;
	flex-direction: column;
	gap: var(--rynue--space--xs);
	margin-bottom: var(--rynue--space--sm);
}

/* ─── Restricted content message ─────────────────────────────────────────── */
.rynue-restricted-content {
	padding: var(--rynue--space--lg) var(--rynue--space--xl);
	background: var(--rynue--color--surface);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius);
	text-align: center;
	color: var(--rynue--color--text-secondary);
}

.rynue-restricted-content p {
	margin: 0 0 var(--rynue--space--md);
}

/* ─── Members-only notice (WooCommerce integration) ──────────────────────── */
.rynue-members-only-notice {
	padding: var(--rynue--space--md) var(--rynue--space--lg);
	background: var(--rynue--color--accent-light);
	border: 1px solid var(--rynue--color--accent);
	border-radius: var(--rynue--border--radius);
	color: var(--rynue--color--accent-hover);
	margin-bottom: var(--rynue--space--lg);
}

/* ─── Pay-by-check payment instructions ──────────────────────────────────── */
.rynue-check-instructions {
	padding: var(--rynue--space--md) var(--rynue--space--lg);
	background: var(--rynue--color--base);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius);
	margin: var(--rynue--space--md) 0;
}

.rynue-check-instructions address {
	font-style: normal;
	margin-top: var(--rynue--space--xs);
}

/* ─── Shipping fields section ────────────────────────────────────────────── */
.rynue-shipping-fields {
	margin-top: var(--rynue--space--lg);
	padding-top: var(--rynue--space--md);
	border-top: 1px solid var(--rynue--color--border);
}

/* ─── Shipping form ──────────────────────────────────────────────────────── */
.rynue-shipping-form {
	max-width: 520px;
}

/* ─── Auto-renewal toggle (account page) ─────────────────────────────────── */
.rynue-auto-renewal-toggle {
	padding: var(--rynue--space--md) 0;
}

/* ─── Invite link (group accounts / invite-only) ─────────────────────────── */
.rynue-invite-link {
	display: inline-flex;
	align-items: center;
	gap: var(--rynue--space--xs);
	color: var(--rynue--color--accent);
	text-decoration: none;
	font-size: var(--rynue--font-size--sm);
	font-weight: 600;
}

.rynue-invite-link:hover {
	color: var(--rynue--color--accent-hover);
	text-decoration: underline;
}

/* ─── RSS feed URL display ───────────────────────────────────────────────── */
.rynue-feed-url {
	display: block;
	padding: var(--rynue--space--sm) var(--rynue--space--md);
	background: var(--rynue--color--base);
	border: 1px solid var(--rynue--color--border);
	border-radius: var(--rynue--border--radius--sm);
	font-family: monospace;
	font-size: var(--rynue--font-size--sm);
	color: var(--rynue--color--text-primary);
	word-break: break-all;
	margin: var(--rynue--space--xs) 0;
	cursor: text;
	user-select: all;
}

/* ─── Email template wrapper classes (fallback; primary styles are inlined) */
.rynue-email-wrap {
	max-width: 600px;
	margin: 40px auto;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
}

.rynue-email-header {
	padding: 28px 36px;
}

.rynue-email-body {
	padding: 36px;
	color: var(--rynue--color--text-primary);
	line-height: 1.7;
	font-size: 15px;
}

.rynue-email-footer {
	background: var(--rynue--color--base);
	padding: 20px 36px;
	font-size: 13px;
	color: var(--rynue--color--text-muted);
	border-top: 1px solid var(--rynue--color--border);
}

/* ─── Generic form row ───────────────────────────────────────────────────── */
.rynue-form-row {
	margin-bottom: var(--rynue--space--md);
}

/* ─── Sale banner (fixed-position promotional bar) ───────────────────────── */
.rynue-banner-text {
	display: inline;
}

.rynue-banner-close {

	/* Primarily styled via inline <style> injected by SalesAndPromotions module */
	appearance: none;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

/* ─── Block wrapper classes ─────────────────────────────────────────────── */
.rynue-membership-billing,
.rynue-membership-invoices,
.rynue-membership-confirmation {
	display: block;
	width: 100%;
}

.rynue-membership-billing h2,
.rynue-membership-invoices h2,
.rynue-membership-confirmation h2 {
	margin: 0 0 var(--rynue--space--md) 0;
	font-size: 1.375rem;
}

.rynue-membership-billing h3 {
	margin: var(--rynue--space--lg) 0 var(--rynue--space--sm) 0;
	font-size: 1.125rem;
}

/* ─── Reduced-motion accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

	:root {
		--rynue--transition--fast: 0s;
		--rynue--transition--base: 0s;
	}

	/* Hard-coded transitions not using custom properties */
	.rynue-goal__fill {
		transition: none;
	}
}

/* ─── Skip link (WCAG 2.4.1) ─────────────────────────────────────────────── */
.rynue-skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	text-decoration: none;
}

.rynue-skip-link:focus {
	position: fixed;
	top: var(--rynue--space--sm);
	left: var(--rynue--space--sm);
	width: auto;
	height: auto;
	padding: var(--rynue--space--sm) var(--rynue--space--md);
	margin: 0;
	overflow: visible;
	clip: auto;
	background: var(--rynue--color--surface);
	color: var(--rynue--color--accent);
	border: 2px solid var(--rynue--color--accent);
	border-radius: var(--rynue--border--radius);
	box-shadow: var(--rynue--shadow--md);
	font-size: var(--rynue--font-size--sm);
	font-weight: 600;
	z-index: 9999;
}