/**
 * Mom Haven Membership & Billing - front-end styles.
 * Extends the shared --mhcp-* tokens (see Core & Providers' mhcp-frontend.css).
 * Falls back to local values if Core isn't active so this plugin still
 * looks correct standalone.
 */

.mhmb-plans__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--mhcp-space-2, 16px);
	margin: var(--mhcp-space-3, 24px) 0;
}

.mhmb-plan-card {
	background: var(--mhcp-white, #fff);
	border: 1px solid var(--mhcp-line, #e3ddd0);
	border-radius: var(--mhcp-radius-lg, 20px);
	padding: var(--mhcp-space-3, 24px);
	display: flex;
	flex-direction: column;
	position: relative;
}
.mhmb-plan-card--featured {
	border-color: var(--mhcp-terracotta-500, #bb8f6c);
	box-shadow: 0 10px 30px rgba(169, 122, 82, 0.15);
}
.mhmb-plan-card h3 { margin-bottom: 4px; }
.mhmb-plan-card__price {
	font-family: var(--mhcp-font-display, serif);
	font-size: 2.2rem;
	color: var(--mhcp-sage-900, #2c4028);
	margin: 0 0 var(--mhcp-space-1, 8px);
}
.mhmb-plan-card__price span { font-family: var(--mhcp-font-body, sans-serif); font-size: 0.9rem; color: var(--mhcp-ink-soft, #6b6558); }
.mhmb-plan-card__desc { color: var(--mhcp-ink-soft, #6b6558); font-size: 0.9rem; }
.mhmb-plan-card__benefits { list-style: none; margin: var(--mhcp-space-2, 16px) 0; padding: 0; flex-grow: 1; }
.mhmb-plan-card__benefits li { padding: 7px 0 7px 14px; border-left: 2px solid var(--mhcp-sage-300, #8fa389); font-size: 0.88rem; margin-bottom: 4px; color: var(--mhcp-ink-soft, #6d6a5f); }
.mhmb-plan-card__form { display: flex; flex-direction: column; gap: 10px; }
.mhmb-plan-card__terms { font-size: 0.82rem; }
.mhmb-plans__terms { margin-top: var(--mhcp-space-3, 24px); color: var(--mhcp-ink-soft, #6b6558); font-size: 0.88rem; }
.mhmb-plans__terms summary { cursor: pointer; font-weight: 700; }

.mhmb-status-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--mhcp-space-2, 16px);
	background: var(--mhcp-sage-100, #e4ebe1);
	border-radius: var(--mhcp-radius-md, 12px);
	padding: var(--mhcp-space-2, 16px);
	margin-bottom: var(--mhcp-space-3, 24px);
}
.mhmb-status-grid__value { font-weight: 700; margin: 0; }

.mhmb-credits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--mhcp-space-2, 16px); }
.mhmb-credit-card { border: 1px solid var(--mhcp-line, #e3ddd0); border-radius: var(--mhcp-radius-md, 12px); padding: var(--mhcp-space-2, 16px); }
.mhmb-credit-card__value { font-family: var(--mhcp-font-display, serif); font-size: 2rem; color: var(--mhcp-sage-700, #3a5534); margin: 4px 0; }

.mhmb-portal-actions { display: flex; gap: var(--mhcp-space-1, 8px); flex-wrap: wrap; margin-top: var(--mhcp-space-3, 24px); align-items: center; }
.mhmb-portal-actions form { display: inline-block; }
.mhmb-plans { min-height:70vh; padding:clamp(24px,5vw,54px) 0; }
.mhmb-plans__intro { max-width:700px; margin-bottom:26px; }
.mhmb-plans__intro h2 { font-size:clamp(2rem,5vw,3.25rem); }
.mhmb-plans__grid { gap:24px; align-items:stretch; }
.mhmb-plan-card { border-radius:20px; padding:clamp(24px,4vw,36px); box-shadow:0 10px 36px rgba(38,54,31,.07); transition:transform .18s,box-shadow .18s; }
.mhmb-plan-card:hover { transform:translateY(-4px); box-shadow:0 18px 46px rgba(38,54,31,.13); }
.mhmb-plan-card--featured { transform:scale(1.02); }
.mhmb-plan-card--featured:hover { transform:scale(1.02) translateY(-4px); }
.mhmb-plan-card__benefits li { border-left:3px solid var(--mhcp-sage-300,#8fa389); padding:8px 0 8px 14px; }
.mhmb-plan-card .mhcp-btn { width:100%; box-sizing:border-box; }