.mmc-calculator{
	--mmc-ink:#392f35;
	--mmc-muted:#70656b;
	--mmc-rose:#c97486;
	--mmc-rose-dark:#9f5264;
	--mmc-blush:#fff5f6;
	--mmc-cream:#fffaf5;
	--mmc-line:#eadde0;
	--mmc-good:#2f7056;
	--mmc-warn:#8a5a1f;
	--mmc-danger:#9b3d4d;
	--mmc-shadow:0 18px 50px rgba(86,58,67,.12);

	container-type:inline-size;
	container-name:mmc;
	width:100%;
	max-width:1100px;
	min-width:0;
	margin:32px auto;
	padding:clamp(18px,3vw,34px);
	color:var(--mmc-ink);
	background:linear-gradient(145deg,var(--mmc-cream),var(--mmc-blush));
	border-radius:28px;
	font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	font-size:16px;
	line-height:1.5;
	overflow:hidden;
}

.mmc-calculator *,
.mmc-calculator *::before,
.mmc-calculator *::after{
	box-sizing:border-box;
	min-width:0;
}

.mmc-header{margin-bottom:22px}
.mmc-brand{font-size:.82rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mmc-rose-dark)}
.mmc-header h2{margin:.35rem 0 .8rem;color:var(--mmc-ink);font-family:Georgia,serif;font-size:clamp(2rem,5vw,3.8rem);line-height:1.04}
.mmc-header p{max-width:760px;margin:0;color:var(--mmc-muted);font-size:1.02rem}

.mmc-notice{
	margin-bottom:22px;
	padding:14px 16px;
	border:1px solid #ead89b;
	border-radius:16px;
	background:#fff8df;
	color:#684b17;
	font-size:.94rem;
}

.mmc-grid{
	display:grid;
	grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr);
	gap:22px;
	align-items:start;
}

.mmc-card{
	width:100%;
	min-width:0;
	padding:24px;
	border:1px solid rgba(234,221,224,.9);
	border-radius:22px;
	background:rgba(255,255,255,.95);
	box-shadow:var(--mmc-shadow);
}

.mmc-card h3{margin:0 0 18px;color:var(--mmc-ink);font-size:1.2rem}

.mmc-form-grid{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	gap:18px 16px;
}

.mmc-full{grid-column:1/-1}

.mmc-calculator label{
	display:block;
	margin:0;
	color:var(--mmc-ink);
	font-size:.88rem;
	font-weight:750;
}

.mmc-hint{
	display:block;
	margin:4px 0 7px;
	color:var(--mmc-muted);
	font-size:.78rem;
	font-weight:500;
	line-height:1.4;
}

.mmc-calculator input,
.mmc-calculator select{
	display:block;
	width:100%;
	max-width:100%;
	min-height:48px;
	margin-top:7px;
	padding:11px 13px;
	border:1px solid #d9cbd0;
	border-radius:12px;
	outline:none;
	background:#fff;
	box-shadow:none;
	color:var(--mmc-ink);
	font:inherit;
	font-size:1rem;
	line-height:1.25;
}

.mmc-calculator select{
	padding-right:38px;
	white-space:nowrap;
	text-overflow:ellipsis;
}

.mmc-calculator input:focus,
.mmc-calculator select:focus{
	border-color:var(--mmc-rose);
	box-shadow:0 0 0 4px rgba(201,116,134,.14);
}

.mmc-inline{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(88px,112px);
	gap:8px;
	align-items:end;
}

.mmc-inline input,
.mmc-inline select{margin-top:0}

.mmc-check{
	display:flex!important;
	gap:11px;
	align-items:flex-start;
	width:100%;
	padding:13px 14px;
	border:1px solid var(--mmc-line);
	border-radius:12px;
	background:#fff;
	font-weight:600!important;
	line-height:1.4;
}

.mmc-check input{
	flex:0 0 auto;
	width:18px;
	height:18px;
	min-height:18px;
	margin:2px 0 0;
	padding:0;
}

.mmc-check span{
	display:block;
	overflow-wrap:anywhere;
}

.mmc-calculator button{
	width:100%;
	min-height:50px;
	margin-top:18px;
	padding:14px 18px;
	border:0;
	border-radius:14px;
	background:var(--mmc-rose-dark);
	color:#fff;
	font-size:1rem;
	font-weight:800;
	line-height:1.2;
	cursor:pointer;
}

.mmc-calculator button:hover{filter:brightness(.96)}

.mmc-empty{padding:34px 10px;color:var(--mmc-muted);text-align:center}
.mmc-result-title{margin:0 0 4px!important;font-family:Georgia,serif!important;font-size:1.75rem!important}
.mmc-summary{margin-bottom:18px;color:var(--mmc-muted);font-size:.92rem}

.mmc-metric{
	margin:10px 0;
	padding:16px;
	border-radius:16px;
	background:var(--mmc-blush);
}

.mmc-name{color:var(--mmc-rose-dark);font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.mmc-value{margin-top:3px;font-size:clamp(1.35rem,5cqw,1.65rem);font-weight:850;overflow-wrap:anywhere}
.mmc-small{color:var(--mmc-muted);font-size:.82rem;overflow-wrap:anywhere}

.mmc-rangebar{
	height:10px;
	margin:10px 0 4px;
	overflow:hidden;
	border-radius:999px;
	background:#f0e5e8;
}

.mmc-rangebar span{
	display:block;
	width:66%;
	height:100%;
	margin-left:17%;
	border-radius:999px;
	background:linear-gradient(90deg,#e5a7b4,#b75e72);
}

.mmc-message{margin-top:14px;padding:13px 14px;border-radius:14px;font-size:.9rem;overflow-wrap:anywhere}
.mmc-good{background:#eef8f3;color:var(--mmc-good)}
.mmc-warn{background:#fff4e4;color:var(--mmc-warn)}
.mmc-danger{background:#fff0f2;color:var(--mmc-danger)}

.mmc-facts{margin-top:22px;padding-top:20px;border-top:1px solid var(--mmc-line)}
.mmc-facts h4{margin:0 0 9px;font-size:1rem}
.mmc-facts ul{margin:0;padding-left:20px;color:var(--mmc-muted);font-size:.9rem}
.mmc-facts li{margin:7px 0}

.mmc-information{margin-top:22px}
.mmc-information h3{font-family:Georgia,serif;font-size:1.65rem}
.mmc-information p{color:var(--mmc-muted);overflow-wrap:anywhere}
.mmc-fine{margin-top:18px;font-size:.78rem!important}

.mmc-calculator [hidden]{display:none!important}

/* WordPress layout fix:
   the calculator now responds to its actual content width,
   not only to the browser window width. */
@container mmc (max-width:760px){
	.mmc-calculator{
		padding:20px;
		border-radius:22px;
	}

	.mmc-grid{
		grid-template-columns:minmax(0,1fr);
	}

	.mmc-form-grid{
		grid-template-columns:minmax(0,1fr);
	}

	.mmc-full{
		grid-column:1;
	}
}

@container mmc (max-width:540px){
	.mmc-calculator{
		padding:14px;
		border-radius:18px;
	}

	.mmc-header h2{
		font-size:clamp(1.75rem,10cqw,2.35rem);
	}

	.mmc-card{
		padding:18px;
	}

	.mmc-form-grid{
		gap:16px;
	}

	.mmc-inline{
		grid-template-columns:minmax(0,1fr) 86px;
	}

	.mmc-calculator input,
	.mmc-calculator select{
		min-height:50px;
		font-size:16px;
	}

	.mmc-check{
		padding:13px;
	}

	.mmc-empty{
		padding:24px 6px;
	}
}

/* Fallback for browsers without container-query support. */
@supports not (container-type:inline-size){
	@media(max-width:800px){
		.mmc-grid{grid-template-columns:1fr}
		.mmc-form-grid{grid-template-columns:1fr}
		.mmc-full{grid-column:1}
	}

	@media(max-width:480px){
		.mmc-calculator{padding:14px;border-radius:18px}
		.mmc-card{padding:18px}
		.mmc-inline{grid-template-columns:1fr 86px}
	}
}