/**
 * HCGPT Membership — frontend styles (mobile-first).
 *
 * Loaded only on pages that contain at least one [hcgpt-membership-*]
 * shortcode (see Frontend\Assets enqueue logic).
 *
 * Convention:
 *  - All custom properties live on .hcgpt-mb-* roots, no globals.
 *  - Colors derive from --hcgpt-mb-color-* tokens; default neutral palette
 *    so it inherits sanely from any theme.
 *  - Layout breakpoint: 768px → desktop tweaks.
 *  - WCAG 2.1 AA: 4.5:1 contrast ratio default; focus rings always visible.
 */

:root,
.hcgpt-mb,
.hcgpt-mb-account,
.hcgpt-mb-profile-form,
.hcgpt-mb-checkout-form,
.hcgpt-mb-login-form,
.hcgpt-mb-register-form,
.hcgpt-mb-delete-account-form,
.hcgpt-mb-empty,
.hcgpt-mb-warning,
.hcgpt-mb-notice {
	--hcgpt-mb-color-bg: #ffffff;
	--hcgpt-mb-color-fg: #1a1a1a;
	--hcgpt-mb-color-fg-muted: #555555;
	--hcgpt-mb-color-border: #e5e5e5;
	--hcgpt-mb-color-accent: #1f2937;
	--hcgpt-mb-color-accent-fg: #ffffff;
	--hcgpt-mb-color-success: #064e3b;
	--hcgpt-mb-color-success-bg: #d1fae5;
	--hcgpt-mb-color-error: #7f1d1d;
	--hcgpt-mb-color-error-bg: #fee2e2;
	--hcgpt-mb-color-warning-bg: #fef3c7;
	--hcgpt-mb-radius: 8px;
	--hcgpt-mb-spacing: 1rem;
	--hcgpt-mb-tap-min: 44px;
}

@media (prefers-color-scheme: dark) {
	.hcgpt-mb,
	.hcgpt-mb-account,
	.hcgpt-mb-profile-form,
	.hcgpt-mb-checkout-form,
	.hcgpt-mb-login-form,
	.hcgpt-mb-register-form,
	.hcgpt-mb-delete-account-form,
	.hcgpt-mb-empty,
	.hcgpt-mb-warning,
	.hcgpt-mb-notice {
		--hcgpt-mb-color-bg: #0f0f0f;
		--hcgpt-mb-color-fg: #f5f5f5;
		--hcgpt-mb-color-fg-muted: #a3a3a3;
		--hcgpt-mb-color-border: #2a2a2a;
		--hcgpt-mb-color-accent: #e5e5e5;
		--hcgpt-mb-color-accent-fg: #0f0f0f;
		--hcgpt-mb-color-success-bg: #064e3b33;
		--hcgpt-mb-color-error-bg: #7f1d1d33;
		--hcgpt-mb-color-warning-bg: #92400e33;
	}
}

/* ---------- AccountPage tabs (mobile-first) ---------- */

.hcgpt-mb-account__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-bottom: 1px solid var(--hcgpt-mb-color-border);
	padding-bottom: 0.5rem;
	margin-bottom: var(--hcgpt-mb-spacing);
	overflow-x: auto;
}

.hcgpt-mb-account__tab {
	display: inline-flex;
	align-items: center;
	min-height: var(--hcgpt-mb-tap-min);
	padding: 0.5rem 0.875rem;
	border-radius: var(--hcgpt-mb-radius);
	color: var(--hcgpt-mb-color-fg-muted);
	text-decoration: none;
	font-weight: 500;
}

.hcgpt-mb-account__tab:hover { color: var(--hcgpt-mb-color-fg); }
.hcgpt-mb-account__tab.is-active {
	background: var(--hcgpt-mb-color-accent);
	color: var(--hcgpt-mb-color-accent-fg);
}
.hcgpt-mb-account__tab:focus-visible {
	outline: 2px solid var(--hcgpt-mb-color-accent);
	outline-offset: 2px;
}

/* ---------- Forms ---------- */

.hcgpt-mb-profile-form,
.hcgpt-mb-checkout-form,
.hcgpt-mb-login-form,
.hcgpt-mb-register-form,
.hcgpt-mb-delete-account-form {
	display: grid;
	gap: var(--hcgpt-mb-spacing);
	max-width: 36rem;
	color: var(--hcgpt-mb-color-fg);
}

.hcgpt-mb-profile-form fieldset,
.hcgpt-mb-checkout-form fieldset {
	border: 1px solid var(--hcgpt-mb-color-border);
	border-radius: var(--hcgpt-mb-radius);
	padding: var(--hcgpt-mb-spacing);
	display: grid;
	gap: 0.75rem;
}

.hcgpt-mb-profile-form label,
.hcgpt-mb-checkout-form label,
.hcgpt-mb-login-form label,
.hcgpt-mb-register-form label,
.hcgpt-mb-delete-account-form label {
	display: grid;
	gap: 0.25rem;
	font-weight: 500;
}

.hcgpt-mb-profile-form input,
.hcgpt-mb-profile-form select,
.hcgpt-mb-checkout-form input,
.hcgpt-mb-login-form input,
.hcgpt-mb-register-form input,
.hcgpt-mb-delete-account-form input,
.hcgpt-mb-delete-account-form select {
	min-height: var(--hcgpt-mb-tap-min);
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--hcgpt-mb-color-border);
	border-radius: var(--hcgpt-mb-radius);
	background: var(--hcgpt-mb-color-bg);
	color: var(--hcgpt-mb-color-fg);
	font-size: 1rem;
}

.hcgpt-mb-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
}
.hcgpt-mb-checkbox input { min-height: auto; margin-top: 0.25rem; }

/* ---------- Buttons ---------- */

.hcgpt-mb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--hcgpt-mb-tap-min);
	padding: 0.625rem 1rem;
	border: none;
	border-radius: var(--hcgpt-mb-radius);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.hcgpt-mb-btn--primary {
	background: var(--hcgpt-mb-color-accent);
	color: var(--hcgpt-mb-color-accent-fg);
}
.hcgpt-mb-btn--danger {
	background: var(--hcgpt-mb-color-error-bg);
	color: var(--hcgpt-mb-color-error);
}
.hcgpt-mb-btn:focus-visible {
	outline: 2px solid var(--hcgpt-mb-color-accent);
	outline-offset: 2px;
}

/* ---------- Notices, empty, warning ---------- */

.hcgpt-mb-notice {
	padding: 0.75rem 1rem;
	border-radius: var(--hcgpt-mb-radius);
	font-size: 0.9375rem;
}
.hcgpt-mb-notice--success {
	background: var(--hcgpt-mb-color-success-bg);
	color: var(--hcgpt-mb-color-success);
}
.hcgpt-mb-notice--error {
	background: var(--hcgpt-mb-color-error-bg);
	color: var(--hcgpt-mb-color-error);
}

.hcgpt-mb-warning {
	background: var(--hcgpt-mb-color-warning-bg);
	border-left: 4px solid #d97706;
	padding: 1rem;
	border-radius: var(--hcgpt-mb-radius);
}

.hcgpt-mb-empty {
	padding: 2rem 1rem;
	border: 1px dashed var(--hcgpt-mb-color-border);
	border-radius: var(--hcgpt-mb-radius);
	text-align: center;
	color: var(--hcgpt-mb-color-fg-muted);
}

/* Phase 4A: the `.hcgpt-mb-orders-table` block was removed — no renderer emits
   that class anymore (OrdersTable::render now ships the V4 `.hcgpt-settings-table`). */

.hcgpt-mb-badge {
	display: inline-block;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	background: var(--hcgpt-mb-color-border);
	color: var(--hcgpt-mb-color-fg);
}
.hcgpt-mb-badge--paid     { background: var(--hcgpt-mb-color-success-bg); color: var(--hcgpt-mb-color-success); }
.hcgpt-mb-badge--refunded { background: var(--hcgpt-mb-color-warning-bg); color: #92400e; }
.hcgpt-mb-badge--failed   { background: var(--hcgpt-mb-color-error-bg);   color: var(--hcgpt-mb-color-error); }

/* ---------- Level cards (checkout) ---------- */

.hcgpt-mb-checkout__levels { display: grid; gap: 0.75rem; }
.hcgpt-mb-level-card {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem;
	border: 2px solid var(--hcgpt-mb-color-border);
	border-radius: var(--hcgpt-mb-radius);
	cursor: pointer;
}
.hcgpt-mb-level-card:has(input:checked) {
	border-color: var(--hcgpt-mb-color-accent);
}

/* ---------- Loading skeleton (used by JS) ---------- */

.hcgpt-mb-skeleton {
	background: linear-gradient( 90deg, var(--hcgpt-mb-color-border), color-mix( in srgb, var(--hcgpt-mb-color-border) 60%, transparent ) );
	background-size: 200% 100%;
	animation: hcgpt-mb-skeleton 1.4s ease-in-out infinite;
	border-radius: var(--hcgpt-mb-radius);
	min-height: 1rem;
}
@keyframes hcgpt-mb-skeleton {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ---------- Desktop tweaks ---------- */

@media (min-width: 768px) {
	.hcgpt-mb-checkout__levels {
		grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
	}
}

/* ===== Phase 7 Layer C — Pricing / Restricted / Cancel / Lost-Reset password ===== */

.hcgpt-mb-pricing-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
}
.hcgpt-mb-pricing-card {
	position: relative;
	border: 1px solid var( --hcgpt-mb-border, rgba( 0, 0, 0, .08 ) );
	border-radius: 12px;
	padding: 1.5rem 1.25rem;
	background: var( --hcgpt-mb-surface, #fff );
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.hcgpt-mb-pricing-card.is-featured {
	border-color: rgba( 31, 41, 55, .9 );
	box-shadow: 0 8px 24px -16px rgba( 0, 0, 0, .35 );
}
.hcgpt-mb-pricing-card__badge {
	position: absolute;
	top: -.65rem;
	left: 1rem;
	background: #1f2937;
	color: #fff;
	font-size: .72rem;
	letter-spacing: .04em;
	padding: .25rem .55rem;
	border-radius: 999px;
	text-transform: uppercase;
}
.hcgpt-mb-pricing-card__name { font-size: 1.1rem; margin: 0; }
.hcgpt-mb-pricing-card__price { font-size: 1.5rem; margin: 0; }
.hcgpt-mb-pricing-card__price span { font-size: .9rem; opacity: .7; font-weight: 500; }
.hcgpt-mb-pricing-card__desc { font-size: .9rem; opacity: .8; margin: 0; }
.hcgpt-mb-pricing-card__features { list-style: disc inside; padding: 0; margin: 0; font-size: .9rem; }
.hcgpt-mb-pricing-card__features li { padding: .15rem 0; }
.hcgpt-mb-pricing-card__cta { margin-top: auto; align-self: flex-start; }

.hcgpt-mb-restricted {
	border: 1px dashed var( --hcgpt-mb-border, rgba( 0, 0, 0, .15 ) );
	border-radius: 12px;
	padding: 1.5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	align-items: center;
}
.hcgpt-mb-restricted__icon { font-size: 2.5rem; line-height: 1; }
.hcgpt-mb-restricted__features { list-style: none; padding: 0; margin: 0; font-size: .9rem; opacity: .85; }
.hcgpt-mb-restricted__actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }

.hcgpt-mb-cancel-form { display: flex; flex-direction: column; gap: 1rem; max-width: 32rem; }
.hcgpt-mb-cancel-form .hcgpt-mb-radio { display: block; padding: .35rem 0; }
.hcgpt-mb-cancel-form__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.hcgpt-mb-btn--danger { background: #b91c1c; color: #fff; }
.hcgpt-mb-btn--ghost { background: transparent; border: 1px solid currentColor; }

.hcgpt-mb-lost-password-form,
.hcgpt-mb-reset-password-form { display: flex; flex-direction: column; gap: .75rem; max-width: 24rem; }

/* ===== Phase 7 Layer D — MGA portal frontend ===== */

.hcgpt-mb-mga-team,
.hcgpt-mb-mga-member,
.hcgpt-mb-mga-invite { display: flex; flex-direction: column; gap: 1.25rem; }
.hcgpt-mb-mga-team__header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hcgpt-mb-mga-team__seats { font-size: .9rem; opacity: .8; margin: 0; }
.hcgpt-mb-mga-team__invite-form,
.hcgpt-mb-mga-invite__actions { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; }
.hcgpt-mb-mga-team__invite-form label { display: flex; flex-direction: column; gap: .35rem; }
.hcgpt-mb-mga-team__invite-form input[type="email"] { min-width: 16rem; }
.hcgpt-mb-mga-member__cta { padding: .75rem 1rem; border-radius: 8px; background: rgba( 31, 41, 55, .05 ); }
.hcgpt-mb-mga-member__roster ul { list-style: disc inside; padding: 0; margin: .25rem 0; }
.hcgpt-mb-mga-member__leave { margin-top: .5rem; }
.hcgpt-mb-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.hcgpt-mb-table th,
.hcgpt-mb-table td { padding: .5rem .65rem; border-bottom: 1px solid rgba( 0, 0, 0, .08 ); text-align: left; }
.hcgpt-mb-notice--warning { background: rgba( 234, 179, 8, .1 ); color: #92400e; padding: .55rem .75rem; border-radius: 8px; }

/* ===== Phase 7 Layer E — Referral dashboard + landing banner ===== */

.hcgpt-mb-referral { display: flex; flex-direction: column; gap: 1.25rem; }
.hcgpt-mb-referral__link { display: flex; gap: .5rem; align-items: center; }
.hcgpt-mb-referral__link input { flex: 1; padding: .55rem .75rem; border: 1px solid rgba( 0, 0, 0, .15 ); border-radius: 8px; }
.hcgpt-mb-referral__share { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.hcgpt-mb-referral__share-label { font-size: .9rem; opacity: .8; }
.hcgpt-mb-referral__stats { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: .75rem; }
.hcgpt-mb-referral__stats > div {
	background: rgba( 0, 0, 0, .04 );
	border-radius: 10px;
	padding: 1rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.hcgpt-mb-referral__stats strong { font-size: 1.5rem; }
.hcgpt-mb-referral__stats span { font-size: .85rem; opacity: .8; }

.hcgpt-mb-referral-banner {
	position: fixed;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	max-width: 36rem;
	margin: 0 auto;
	background: #1f2937;
	color: #fff;
	border-radius: 10px;
	padding: .65rem 1rem;
	box-shadow: 0 12px 32px -16px rgba( 0, 0, 0, .4 );
	display: flex;
	align-items: center;
	gap: .75rem;
	z-index: 9999;
}
.hcgpt-mb-referral-banner__close {
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	margin-left: auto;
}

/* ===== Phase 7 Layer G — Two-step registration (Complete Profile + completion banner) ===== */

.hcgpt-mb-complete-profile { display: flex; flex-direction: column; gap: 1.25rem; max-width: 38rem; }
.hcgpt-mb-complete-profile fieldset { border: 1px solid rgba( 0, 0, 0, .08 ); border-radius: 8px; padding: .75rem 1rem; }
.hcgpt-mb-complete-profile legend { font-weight: 600; padding: 0 .35rem; }
.hcgpt-mb-complete-profile__type label { margin-right: 1rem; }
.hcgpt-mb-complete-profile__shared,
.hcgpt-mb-complete-profile__business,
.hcgpt-mb-complete-profile__custom { display: grid; grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) ); gap: .65rem; }
.hcgpt-mb-complete-profile label { display: flex; flex-direction: column; gap: .25rem; }
.hcgpt-mb-complete-profile__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* .hcgpt-mb-completion-banner rules moved to setup-widget.css in
 * beta.72 — both onboarding nudges (setup widget + completion banner)
 * now share a single stylesheet that's enqueued by
 * Assets::maybe_enqueue_nudges. See assets/css/setup-widget.css for
 * the canonical definitions (with dark-mode + responsive stacking). */