/* YAY Memberships — front-end styles */

.yaymem-levels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	margin: 24px 0;
}
.yaymem-level-card {
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	padding: 24px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	display: flex;
	flex-direction: column;
}
.yaymem-level-card.is-current { border-color: #2271b1; }
.yaymem-level-card__name { margin: 0 0 8px; font-size: 1.4em; }
.yaymem-level-card__price { font-weight: 600; color: #2271b1; margin-bottom: 12px; }
.yaymem-level-card__desc { color: #555; flex: 1; margin-bottom: 16px; }

.yaymem-button {
	display: inline-block;
	padding: 10px 18px;
	background: #2271b1;
	color: #fff !important;
	border: none;
	border-radius: 6px;
	text-decoration: none;
	cursor: pointer;
	font-size: 15px;
	line-height: 1.2;
	text-align: center;
}
.yaymem-button:hover { background: #185a92; }
.yaymem-button--secondary { background: #f0f0f1; color: #1a1a1a !important; }
.yaymem-button--secondary:hover { background: #e2e2e2; }
.yaymem-button--primary { font-size: 16px; padding: 12px 24px; }
.yaymem-button--disabled { background: #c3c4c7; cursor: default; pointer-events: none; }

.yaymem-restricted {
	border: 1px solid #e2e2e2;
	border-left: 4px solid #2271b1;
	background: #f6f9fc;
	padding: 24px;
	border-radius: 8px;
	margin: 20px 0;
}
.yaymem-restricted__title { font-size: 1.2em; font-weight: 600; margin-top: 0; }
.yaymem-restricted__actions { margin-bottom: 0; }
.yaymem-restricted__actions .yaymem-button { margin-right: 8px; }

.yaymem-checkout-form { max-width: 560px; }
.yaymem-fieldset {
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 16px 20px;
	margin: 0 0 20px;
}
.yaymem-fieldset legend { font-weight: 600; padding: 0 6px; }
.yaymem-checkout-form label { display: block; margin-bottom: 4px; font-weight: 500; }
.yaymem-checkout-form input[type="text"],
.yaymem-checkout-form input[type="email"],
.yaymem-checkout-form input[type="password"] {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
}
.yaymem-checkout-summary {
	background: #f6f9fc;
	padding: 16px 20px;
	border-radius: 8px;
	margin-bottom: 20px;
}
.yaymem-cost-text { color: #2271b1; font-weight: 600; margin: 0; }
.yaymem-discount-row { display: flex; gap: 8px; align-items: stretch; }
.yaymem-discount-row input { flex: 1; }
.yaymem-discount-feedback { font-size: 0.92em; margin: 8px 0 0; }
.yaymem-discount-feedback.is-success { color: #156e2e; }
.yaymem-discount-feedback.is-error { color: #b32d2e; }
.yaymem-gateway-note { color: #666; font-size: 0.95em; }

.yaymem-notice {
	padding: 12px 16px;
	border-radius: 6px;
	background: #f6f9fc;
	border: 1px solid #cfe2f3;
	margin-bottom: 16px;
}
.yaymem-notice--error { background: #fcf0f1; border-color: #f1c4c6; color: #b32d2e; }
.yaymem-notice ul { margin: 0; padding-left: 18px; }

.yaymem-account h3 { margin-top: 28px; }
.yaymem-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.yaymem-table th, .yaymem-table td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid #e2e2e2;
}
.yaymem-error { color: #b32d2e; }

/* Directory */
.yaymem-directory__search { display: flex; gap: 8px; margin-bottom: 20px; max-width: 420px; }
.yaymem-directory__search input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 6px; }
.yaymem-directory__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}
.yaymem-directory__card {
	text-align: center;
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	padding: 18px;
	background: #fff;
}
.yaymem-directory__card img { border-radius: 50%; margin-bottom: 8px; }
.yaymem-directory__name { font-weight: 600; }
.yaymem-directory__level { color: var(--ym-primary, #9c4a34); font-size: 0.9em; margin-top: 4px; }
.yaymem-directory__heading { margin: 28px 0 14px; font-size: 1.05rem; font-weight: 700; }
.yaymem-directory__heading:first-of-type { margin-top: 4px; }
.yaymem-directory__org { color: #64748b; font-size: 0.82em; margin-top: 6px; }
.yaymem-directory__crm { margin-top: 8px; font-size: 0.8em; }
.yaymem-directory__card--org { border-left: 3px solid var(--ym-primary, #9c4a34); }
.yaymem-directory__orgmark {
	width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	background: var(--ym-primary-050, #f7ebe6); color: var(--ym-primary, #9c4a34);
	font-weight: 800; font-size: 22px;
}

.yaymem-profile { text-align: center; max-width: 460px; margin: 0 auto; }
.yaymem-profile img { border-radius: 50%; }
.yaymem-profile__level { color: #2271b1; font-weight: 600; }
.yaymem-profile__field { text-align: left; }

/* Pricing comparison table */
.yaymem-pricing { width: 100%; border-collapse: collapse; }
.yaymem-pricing th, .yaymem-pricing td {
	border: 1px solid #e2e2e2;
	padding: 14px;
	text-align: center;
	vertical-align: top;
}
.yaymem-pricing__head { background: #f6f9fc; font-size: 1.1em; }
.yaymem-pricing__price { font-weight: 700; color: #2271b1; font-size: 1.2em; }
.yaymem-pricing__cycle { font-size: 0.7em; color: #777; font-weight: 400; }

/* Login */
.yaymem-login { max-width: 420px; }
.yaymem-login__links { margin-top: 12px; font-size: 0.92em; }
.yaymem-fields-list { list-style: none; padding: 0; }
.yaymem-fields-list li { padding: 4px 0; border-bottom: 1px solid #f0f0f0; }

/* Gift + redeem */
.yaymem-gift-recipient { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2e2e2; }
.yaymem-gift-recipient textarea { width: 100%; min-height: 70px; }
.yaymem-redeem { max-width: 420px; }
.yaymem-redeem input[type="text"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; }

/* Variable pricing / donations / proration */
.yaymem-custom-price input { padding: 8px; border: 1px solid #ccc; border-radius: 6px; width: 140px; }
.yaymem-custom-price .description { display: block; color: #777; font-size: 0.85em; margin-top: 4px; }
.yaymem-proration { color: #156e2e; font-weight: 600; }
.yaymem-donation { border: 1px solid #e2e2e2; border-radius: 10px; padding: 24px; background: #fff; max-width: 520px; }
.yaymem-donation__amounts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.yaymem-donation__recurring { color: #777; font-size: 0.9em; margin-top: 10px; }

/* Membership card */
.yaymem-card-wrap { max-width: 420px; }
.yaymem-card-id {
	--yaymem-card-color: #2271b1;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
	border: 1px solid #e2e2e2;
	color: #1a1a1a;
}
.yaymem-card-id__header {
	background: var(--yaymem-card-color);
	color: #fff;
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.yaymem-card-id__logo { max-height: 32px; width: auto; }
.yaymem-card-id__biz { font-weight: 700; font-size: 1.05em; }
.yaymem-card-id__level {
	background: rgba(255, 255, 255, 0.25);
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 0.85em;
	font-weight: 600;
}
.yaymem-card-id__body { display: flex; align-items: center; gap: 14px; padding: 18px; }
.yaymem-card-id__avatar img { border-radius: 50%; display: block; }
.yaymem-card-id__details { flex: 1; }
.yaymem-card-id__name { font-size: 1.2em; font-weight: 700; margin-bottom: 6px; }
.yaymem-card-id__meta { font-size: 0.82em; color: #555; display: flex; flex-direction: column; gap: 2px; }
.yaymem-card-id__paused { color: #b32d2e; font-weight: 700; }
.yaymem-card-id__qr { width: 96px; height: 96px; flex: 0 0 96px; }
.yaymem-card-id__qr img, .yaymem-card-id__qr canvas { width: 96px !important; height: 96px !important; }
.yaymem-card-id__footer {
	background: #f6f6f6;
	padding: 8px 18px;
	font-size: 0.78em;
	color: #888;
	text-align: center;
	border-top: 1px solid #eee;
}
.yaymem-card-actions { margin-top: 14px; }

/* Verification page */
.yaymem-verify { max-width: 420px; margin: 0 auto; text-align: center; }
.yaymem-verify__ok, .yaymem-verify__bad {
	border-radius: 12px;
	padding: 28px 20px;
	border: 2px solid;
}
.yaymem-verify__ok { border-color: #1a9c4a; background: #f0fbf3; }
.yaymem-verify__bad { border-color: #b32d2e; background: #fcf0f1; }
.yaymem-verify__badge { font-size: 3em; line-height: 1; }
.yaymem-verify__ok .yaymem-verify__badge { color: #1a9c4a; }
.yaymem-verify__bad .yaymem-verify__badge { color: #b32d2e; }

/* Print: show only the card */
@media print {
	body.yaymem-printing-card * { visibility: hidden; }
	body.yaymem-printing-card .yaymem-card-id,
	body.yaymem-printing-card .yaymem-card-id * { visibility: visible; }
	body.yaymem-printing-card .yaymem-card-wrap {
		position: absolute; left: 0; top: 0; width: 380px;
	}
	.no-print { display: none !important; }
}

/* =====================================================================
   YAY Memberships — Front-end UX refresh (v1.7)
   A cohesive modern look layered over the base styles above.
   ===================================================================== */
:root {
	--ym-primary: #4f46e5;
	--ym-primary-600: #4338ca;
	--ym-primary-050: #eef2ff;
	--ym-ink: #0f172a;
	--ym-body: #334155;
	--ym-muted: #64748b;
	--ym-line: #e2e8f0;
	--ym-bg: #f8fafc;
	--ym-radius: 14px;
	--ym-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.07);
	--ym-shadow-hover: 0 8px 18px rgba(79,70,229,.12), 0 20px 40px rgba(15,23,42,.10);
}

/* Buttons */
.yaymem-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 20px;
	background: var(--ym-primary);
	color: #fff !important;
	border: 1px solid var(--ym-primary);
	border-radius: 10px;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
	box-shadow: 0 1px 2px rgba(79,70,229,.25);
}
.yaymem-button:hover { background: var(--ym-primary-600); border-color: var(--ym-primary-600); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(79,70,229,.28); }
.yaymem-button--secondary { background: #fff; color: var(--ym-ink) !important; border-color: var(--ym-line); box-shadow: none; }
.yaymem-button--secondary:hover { background: var(--ym-bg); border-color: #cbd5e1; }
.yaymem-button--primary { font-size: 16px; padding: 13px 26px; }
.yaymem-button--disabled { background: #e2e8f0; border-color: #e2e8f0; color: var(--ym-muted) !important; box-shadow: none; }

/* Level / pricing cards */
.yaymem-levels { gap: 24px; }
.yaymem-level-card {
	border: 1px solid var(--ym-line);
	border-radius: 18px;
	padding: 28px 26px;
	box-shadow: var(--ym-shadow);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.yaymem-level-card:hover { transform: translateY(-4px); box-shadow: var(--ym-shadow-hover); border-color: #c7d2fe; }
.yaymem-level-card.is-current { border-color: var(--ym-primary); box-shadow: 0 0 0 1px var(--ym-primary), var(--ym-shadow); }
.yaymem-level-card__name { font-size: 1.45em; font-weight: 700; color: var(--ym-ink); margin-bottom: 6px; }
.yaymem-level-card__price { font-weight: 700; color: var(--ym-primary); font-size: 1.05em; margin-bottom: 14px; }
.yaymem-level-card__desc { color: var(--ym-muted); }
.yaymem-level-card .yaymem-button { width: 100%; }

/* Forms / fieldsets */
.yaymem-fieldset {
	border: 1px solid var(--ym-line);
	border-radius: var(--ym-radius);
	padding: 20px 22px;
	margin: 0 0 22px;
	background: #fff;
	box-shadow: var(--ym-shadow);
}
.yaymem-fieldset legend { font-weight: 700; color: var(--ym-ink); padding: 0 8px; }
.yaymem-checkout-form label { color: var(--ym-body); font-weight: 500; margin-bottom: 6px; }
.yaymem-checkout-form input[type="text"],
.yaymem-checkout-form input[type="email"],
.yaymem-checkout-form input[type="password"],
.yaymem-checkout-form input[type="tel"] {
	border: 1px solid #cbd5e1;
	border-radius: 10px;
	padding: 11px 12px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.yaymem-checkout-form input:focus {
	border-color: var(--ym-primary);
	box-shadow: 0 0 0 3px var(--ym-primary-050);
	outline: none;
}
.yaymem-checkout-summary {
	background: linear-gradient(135deg, var(--ym-primary-050), #faf5ff);
	border: 1px solid #e0e7ff;
	border-radius: var(--ym-radius);
	padding: 20px 22px;
}
.yaymem-cost-text { color: var(--ym-primary); font-weight: 700; }

/* Notices */
.yaymem-notice {
	padding: 14px 16px; border-radius: 12px;
	background: var(--ym-primary-050); border: 1px solid #e0e7ff; color: #3730a3;
}
.yaymem-notice--error { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* Account */
.yaymem-account h3 {
	margin-top: 30px; padding-bottom: 8px; border-bottom: 1px solid var(--ym-line);
	color: var(--ym-ink); font-size: 1.15em;
}
.yaymem-table { border: 1px solid var(--ym-line); border-radius: var(--ym-radius); overflow: hidden; box-shadow: var(--ym-shadow); }
.yaymem-table th { background: var(--ym-bg); color: var(--ym-muted); font-size: .8em; text-transform: uppercase; letter-spacing: .04em; }
.yaymem-table th, .yaymem-table td { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; }

/* Restricted-content callout */
.yaymem-restricted {
	border: 1px solid #e0e7ff; border-left: 4px solid var(--ym-primary);
	background: linear-gradient(135deg, var(--ym-primary-050), #fff);
	padding: 28px; border-radius: var(--ym-radius); box-shadow: var(--ym-shadow);
}
.yaymem-restricted__title { font-size: 1.25em; font-weight: 700; color: var(--ym-ink); margin-top: 0; }

/* Pricing comparison table */
.yaymem-pricing { border-radius: var(--ym-radius); overflow: hidden; box-shadow: var(--ym-shadow); }
.yaymem-pricing__head { background: var(--ym-primary-050); color: var(--ym-ink); }
.yaymem-pricing__price { color: var(--ym-primary); }

/* =====================================================================
   Brand = warm terracotta, and the conversion-focused pricing plans.
   ===================================================================== */
:root {
	--ym-primary: #9c4a34;
	--ym-primary-600: #823c2a;
	--ym-primary-050: #f7ebe6;
}

.yaymem-plans { max-width: 1180px; margin: 0 auto; }
.yaymem-plans__head { margin: 0 0 36px; }
.yaymem-plans__eyebrow {
	color: var(--ym-primary);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .01em;
	margin: 0 0 8px;
}
.yaymem-plans__title {
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--ym-ink);
	margin: 0 0 10px;
	letter-spacing: -.02em;
	line-height: 1.1;
}
.yaymem-plans__subtitle { color: var(--ym-muted); font-size: 1.05rem; margin: 0; max-width: 62ch; }

.yaymem-plans__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 24px;
	align-items: stretch;
}

.yaymem-plan {
	--yaymem-plan-accent: var(--ym-primary);
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 18px;
	padding: 32px 28px 28px;
	box-shadow: 0 1px 2px rgba(15,23,42,.03), 0 10px 30px rgba(15,23,42,.06);
	transition: transform .15s ease, box-shadow .15s ease;
}
.yaymem-plan:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(156,74,52,.10), 0 24px 48px rgba(15,23,42,.10); }
.yaymem-plan.is-featured { border-color: var(--yaymem-plan-accent); box-shadow: 0 0 0 2px var(--yaymem-plan-accent), 0 14px 36px rgba(15,23,42,.10); }
.yaymem-plan__badge {
	position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
	background: var(--yaymem-plan-accent); color: #fff;
	font-size: 12px; font-weight: 700; letter-spacing: .03em;
	padding: 5px 14px; border-radius: 999px;
}

.yaymem-plan__icon {
	width: 56px; height: 56px; margin: 0 auto 18px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--yaymem-plan-accent) 12%, #fff);
	color: var(--yaymem-plan-accent);
}
.yaymem-plan__name {
	text-align: center; color: var(--yaymem-plan-accent);
	font-size: 1.18rem; font-weight: 700; margin: 0 0 8px;
}
.yaymem-plan__price { text-align: center; margin: 0 0 16px; line-height: 1; }
.yaymem-plan__amount { font-size: 2.4rem; font-weight: 800; color: var(--ym-ink); letter-spacing: -.02em; }
.yaymem-plan__suffix { font-size: 1.1rem; font-weight: 600; color: var(--ym-ink); }
.yaymem-plan__desc { text-align: center; color: var(--ym-muted); font-size: .92rem; line-height: 1.5; margin: 0 0 20px; }

.yaymem-plan__features { list-style: none; margin: 0 0 24px; padding: 0; }
.yaymem-plan__features li {
	display: flex; align-items: flex-start; gap: 10px;
	padding: 7px 0; color: var(--ym-body); font-size: .95rem; line-height: 1.4;
}
.yaymem-plan__check {
	flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; font-size: 12px; font-weight: 700;
	background: color-mix(in srgb, var(--yaymem-plan-accent) 14%, #fff);
	color: var(--yaymem-plan-accent);
}

.yaymem-plan__cta { margin-top: auto; padding-top: 20px; border-top: 1px solid #f1f1f1; }
.yaymem-plan__cta .yaymem-button {
	width: 100%;
	background: var(--yaymem-plan-accent);
	border-color: var(--yaymem-plan-accent);
	box-shadow: none;
	font-weight: 700;
	padding: 14px;
}
.yaymem-plan__cta .yaymem-button:hover { filter: brightness(.92); transform: translateY(-1px); }
.yaymem-plan__cta .yaymem-button--disabled { background: #e2e8f0; border-color: #e2e8f0; color: var(--ym-muted) !important; filter: none; }

@media (max-width: 600px) {
	.yaymem-plans__title { font-size: 2rem; }
}

/* =====================================================================
   Member login — split "auth card" (v1.9)
   ===================================================================== */
.yaymem-auth {
	display: flex;
	max-width: 1080px;
	margin: 40px auto;
	background: #fff;
	border: 1px solid var(--ym-line);
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.05);
	overflow: hidden;
	min-height: 560px;
}
.yaymem-auth__panel {
	flex: 1 1 50%;
	max-width: 520px;
	padding: 56px 56px 48px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.yaymem-auth__media {
	flex: 1 1 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Brand / logo */
.yaymem-auth__brand { margin-bottom: 26px; }
.yaymem-auth__logo { max-height: 56px; max-width: 200px; width: auto; height: auto; }
.yaymem-auth__wordmark { font-size: 1.15rem; font-weight: 800; color: var(--ym-primary); letter-spacing: -.01em; }

.yaymem-auth__title { font-size: 2.1rem; font-weight: 800; color: var(--ym-ink); margin: 0 0 6px; letter-spacing: -.02em; line-height: 1.1; }
.yaymem-auth__subtitle { color: var(--ym-muted); font-size: 1rem; margin: 0 0 26px; }

/* Fields */
.yaymem-auth__form .yaymem-field { margin: 0 0 18px; }
.yaymem-field label { display: block; font-size: .9rem; font-weight: 600; color: var(--ym-ink); margin-bottom: 7px; }
.yaymem-req { color: var(--ym-primary); }
.yaymem-input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 1rem;
	color: var(--ym-ink);
	background: #f8fafc;
	border: 1px solid var(--ym-line);
	border-radius: 10px;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.yaymem-input:focus {
	background: #fff;
	border-color: var(--ym-primary);
	box-shadow: 0 0 0 3px var(--ym-primary-050);
}

/* Remember / forgot row */
.yaymem-auth__row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin: 4px 0 22px;
}
.yaymem-checkbox { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--ym-body); cursor: pointer; margin: 0; }
.yaymem-checkbox input { width: 16px; height: 16px; accent-color: var(--ym-primary); margin: 0; }
.yaymem-auth__forgot { font-size: .92rem; font-weight: 600; color: var(--ym-primary); text-decoration: none; }
.yaymem-auth__forgot:hover { text-decoration: underline; }

/* Submit */
.yaymem-auth__submit { width: 100%; justify-content: center; padding: 13px 18px; font-size: 1rem; font-weight: 600; border-radius: 10px; }

/* Footer alt link */
.yaymem-auth__alt { margin: 22px 0 0; font-size: .95rem; color: var(--ym-muted); }
.yaymem-auth__alt a { color: var(--ym-primary); font-weight: 700; text-decoration: none; }
.yaymem-auth__alt a:hover { text-decoration: underline; }

/* Error notice inside the card */
.yaymem-auth .yaymem-notice { margin: 0 0 18px; border-radius: 10px; }

/* Responsive: stack and drop the photo on small screens */
@media (max-width: 860px) {
	.yaymem-auth { flex-direction: column; max-width: 460px; min-height: 0; }
	.yaymem-auth__panel { max-width: none; padding: 40px 28px 32px; }
	.yaymem-auth__media { min-height: 160px; flex-basis: 160px; }
}
@media (max-width: 480px) {
	.yaymem-auth__media { display: none; }
	.yaymem-auth__title { font-size: 1.8rem; }
}

/* -------------------------------------------------------------------------
   Member area: shared container + navigation
   ------------------------------------------------------------------------- */
.yaymem-account {
	max-width: 880px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--ym-line);
	border-radius: var(--ym-radius);
	box-shadow: var(--ym-shadow);
	padding: 32px;
}
.yaymem-account__title {
	margin: 0 0 4px;
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--ym-ink);
}
.yaymem-account > h2:not(.yaymem-account__title) {
	margin: 0 0 4px;
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--ym-ink);
}
.yaymem-account h3 {
	margin-top: 28px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--ym-ink);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ym-line);
}

/* Member tab/pill navigation, sticky-feeling header strip */
.yaymem-member-nav {
	max-width: 880px;
	margin: 0 auto 24px;
	padding: 0 16px;
	border: 1px solid var(--ym-line);
	border-bottom-width: 1px;
	background: linear-gradient(180deg, var(--ym-primary-050), #fff);
	border-radius: var(--ym-radius);
}
/* When the nav lives inside the account card, bleed it to the card edges. */
.yaymem-account > .yaymem-member-nav {
	max-width: none;
	margin: -32px -32px 24px;
	padding: 0 32px;
	border: 0;
	border-bottom: 1px solid var(--ym-line);
	border-radius: var(--ym-radius) var(--ym-radius) 0 0;
}
.yaymem-member-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.yaymem-member-nav li { margin: 0; }
.yaymem-member-nav a {
	display: inline-block;
	padding: 14px 16px;
	font-weight: 600;
	font-size: 14px;
	color: var(--ym-muted);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.yaymem-member-nav a:hover { color: var(--ym-primary); }
.yaymem-member-nav a.is-active {
	color: var(--ym-primary);
	border-bottom-color: var(--ym-primary);
}
.yaymem-member-nav__logout { margin-left: auto; }
.yaymem-member-nav__logout a { color: #b91c1c; }
.yaymem-member-nav__logout a:hover { color: #991b1b; }

@media (max-width: 600px) {
	.yaymem-account { padding: 22px 18px 24px; }
	.yaymem-account > .yaymem-member-nav { margin: -22px -18px 20px; padding: 0 10px; }
	.yaymem-member-nav a { padding: 12px 11px; font-size: 13px; }
	.yaymem-member-nav__logout { margin-left: 0; }
}

/* Student account: My Courses (LMS) */
.yaymem-courses { display: grid; gap: 12px; margin: 8px 0 18px; }
.yaymem-course { border: 1px solid var(--ym-line, #e2e8f0); border-radius: 10px; padding: 14px 16px; background: #fff; }
.yaymem-course__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.yaymem-course__title { font-weight: 600; }
.yaymem-course__pct { color: #64748b; font-size: .85em; margin-top: 6px; }
.yaymem-progress { height: 8px; border-radius: 4px; background: #eef1f5; overflow: hidden; margin-top: 10px; }
.yaymem-progress > span { display: block; height: 100%; background: var(--ym-primary, #9c4a34); }

/* -------------------------------------------------------------------------
   Member area: sidebar dashboard (account page, Concept A)
   ------------------------------------------------------------------------- */
.yaymem-account.yaymem-dashboard {
	max-width: 1040px;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

/* Sidebar */
.ym-dash__side {
	flex: 0 0 216px;
	position: sticky;
	top: 24px;
	background: #fff;
	border: 1px solid var(--ym-line);
	border-radius: var(--ym-radius);
	box-shadow: var(--ym-shadow);
	padding: 16px 12px;
}
.ym-dash__brand {
	font-weight: 800;
	color: var(--ym-ink);
	font-size: 15px;
	padding: 6px 10px 14px;
}
.ym-dash__nav { display: flex; flex-direction: column; gap: 2px; }
.ym-dash__nav-item {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	padding: 11px 12px;
	border: 0;
	background: transparent;
	border-radius: 10px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--ym-muted);
	cursor: pointer;
	text-align: left;
	transition: background .15s ease, color .15s ease;
}
.ym-dash__nav-item svg { flex: 0 0 auto; opacity: .85; }
.ym-dash__nav-item:hover { background: var(--ym-bg); color: var(--ym-ink); }
.ym-dash__nav-item.is-active { background: var(--ym-primary-050); color: var(--ym-primary); }
.ym-dash__logout {
	display: block;
	margin-top: 10px;
	padding: 11px 12px;
	font-size: 14px;
	font-weight: 600;
	color: #b91c1c;
	text-decoration: none;
	border-top: 1px solid var(--ym-line);
}
.ym-dash__logout:hover { color: #991b1b; }

/* Main column */
.ym-dash__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* Panels render as cards on the dashboard */
.yaymem-dashboard .yaymem-acc-section {
	background: #fff;
	border: 1px solid var(--ym-line);
	border-radius: var(--ym-radius);
	box-shadow: var(--ym-shadow);
	padding: 22px 24px;
	margin: 0;
}
.yaymem-dashboard .yaymem-acc-section h3 { margin-top: 0; }

/* Progressive enhancement: with JS, show only the active panel */
.yaymem-dashboard.js-tabs .yaymem-acc-section { display: none; }
.yaymem-dashboard.js-tabs .yaymem-acc-section.is-active-panel { display: block; }

/* Overview hero */
.ym-hero { display: flex; align-items: center; gap: 16px; }
.ym-hero__avatar {
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--ym-primary-050);
	color: var(--ym-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 20px;
}
.ym-hero__name { font-size: 1.25rem; font-weight: 800; color: var(--ym-ink); }
.ym-hero__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.ym-pill {
	font-size: 12px;
	font-weight: 700;
	background: var(--ym-primary-050);
	color: var(--ym-primary);
	padding: 3px 11px;
	border-radius: 20px;
}
.ym-status { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; }
.ym-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: currentColor; }
.ym-status--active { color: #15803d; }
.ym-status--paused { color: #b45309; }
.ym-status--none, .ym-status--expired, .ym-status--cancelled { color: var(--ym-muted); }
.ym-hero__renew { font-size: 12px; color: var(--ym-muted); }

/* Stat tiles */
.ym-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 20px; }
.ym-tile { background: var(--ym-bg); border-radius: 10px; padding: 14px 16px; }
.ym-tile__label { display: block; font-size: 12px; color: var(--ym-muted); }
.ym-tile__val { display: block; font-size: 1.15rem; font-weight: 800; color: var(--ym-ink); margin-top: 4px; }

/* Quick actions */
.ym-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Responsive: sidebar collapses to a horizontal scroller above the content */
@media (max-width: 782px) {
	.yaymem-account.yaymem-dashboard { flex-direction: column; }
	.ym-dash__side { position: static; width: 100%; flex: none; }
	.ym-dash__nav { flex-direction: row; flex-wrap: wrap; }
	.ym-dash__nav-item { flex: 0 0 auto; width: auto; }
	.ym-dash__nav-item span { white-space: nowrap; }
	.ym-dash__logout { border-top: 0; margin-top: 4px; }
}

/* Public events + donations (phase 2) ----------------------------------- */
.yaymem-notice--success { background: #eefaf1; border-color: #bfe6cc; color: #1a7f43; }
.yaymem-btn { display: inline-block; border: 0; border-radius: 10px; padding: 12px 20px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; }
.yaymem-btn--primary { background: var(--ym-primary, #4f46e5); color: #fff; }
.yaymem-btn--primary:hover { background: var(--ym-primary-600, #4338ca); color: #fff; }
.yaymem-events { display: grid; gap: 18px; }
.yaymem-event-card { border: 1px solid var(--ym-line, #e2e8f0); border-radius: var(--ym-radius, 14px); padding: 20px 22px; background: #fff; }
.yaymem-event-card__title { margin: 0 0 8px; }
.yaymem-event-card__meta { display: flex; flex-wrap: wrap; gap: 14px; color: var(--ym-muted, #64748b); font-size: 14px; margin-bottom: 10px; }
.yaymem-event-card__desc { color: var(--ym-body, #334155); margin-bottom: 14px; }
.yaymem-event-card__full { color: #b7791f; font-weight: 600; }
.yaymem-event-form { display: grid; gap: 12px; max-width: 460px; }
.yaymem-event-form .yaymem-field label,
.yaymem-donate-form .yaymem-field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.yaymem-event-form input,
.yaymem-donate-form input, .yaymem-donate-form select { width: 100%; padding: 10px 12px; border: 1px solid var(--ym-line, #e2e8f0); border-radius: 10px; font-size: 15px; box-sizing: border-box; }
.yaymem-donate-form { display: grid; gap: 14px; max-width: 480px; }
.yaymem-donate__amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.yaymem-donate__amount { border: 1px solid var(--ym-line, #e2e8f0); background: #fff; border-radius: 10px; padding: 10px 16px; font-weight: 600; cursor: pointer; }
.yaymem-donate__amount.is-active { background: var(--ym-primary, #4f46e5); color: #fff; border-color: var(--ym-primary, #4f46e5); }
.yaymem-donate__recurring { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* Public surveys (primary data) ----------------------------------------- */
.yaymem-survey-form { display: grid; gap: 18px; max-width: 560px; }
.yaymem-survey__title { margin: 0; }
.yaymem-survey__desc { color: var(--ym-muted, #64748b); margin: 4px 0 0; }
.yaymem-survey-q { display: grid; gap: 6px; }
.yaymem-survey-q__label { font-weight: 600; }
.yaymem-req { color: #b32d2e; }
.yaymem-survey__opt { display: block; font-weight: 400; padding: 3px 0; }
.yaymem-survey__rating { display: flex; gap: 14px; }
.yaymem-survey__rating label { display: inline-flex; align-items: center; gap: 4px; }
.yaymem-survey-q textarea, .yaymem-survey-q input[type=text], .yaymem-survey-q input[type=email] { width: 100%; padding: 10px 12px; border: 1px solid var(--ym-line, #e2e8f0); border-radius: 10px; font-size: 15px; box-sizing: border-box; }