/* Theme body fonts: MaxCoach / Elementor / block themes / Bootstrap-style vars, then inherit from page. */
#mpcc-toggle,
#mpcc-panel {
	font-family: var(
		--maxcoach-typography-body-font-family,
		var(
			--wp--preset--font-family--body,
			var(
				--e-global-typography-text-font-family,
				var(--font-family-base, var(--body-font-family, inherit))
			)
		)
	);
}

#mpcc-toggle {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2147483646;
	border: 0;
	border-radius: 999px;
	padding: 12px 16px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	background: #111;
	color: #fff;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}

#mpcc-panel {
	position: fixed;
	right: 20px;
	bottom: 75px;
	width: 360px;
	max-width: calc(100vw - 20px);
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 14px;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.2);
	z-index: 2147483646;
	overflow: hidden;
}

/* Inputs and buttons often use UA/theme serif stacks unless forced to match the panel. */
#mpcc-panel button,
#mpcc-panel input,
#mpcc-panel .mpcc-title,
#mpcc-panel .mpcc-expression {
	font-family: inherit;
}

#mpcc-panel.mpcc-hidden {
	display: none;
}

#mpcc-panel.mpcc-minimised .mpcc-body {
	display: none;
}

.mpcc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	background: #f7f7f7;
	border-bottom: 1px solid #e5e5e5;
	cursor: move;
	user-select: none;
}

.mpcc-title-wrap {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mpcc-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

.mpcc-mode-toggle {
	display: flex;
	gap: 6px;
}

.mpcc-mode-toggle button {
	border: 1px solid #b8c5e0;
	background: #e8eefc;
	color: #111;
	border-radius: 6px;
	padding: 4px 8px;
	cursor: pointer;
	font-size: 12px;
}

.mpcc-mode-toggle button:hover {
	background: #d9e4fa;
	color: #000;
	border-color: #2f6bff;
}

.mpcc-mode-toggle button.active {
	background: #2f6bff;
	color: #fff;
	border-color: #2456d8;
}

.mpcc-header-actions {
	display: flex;
	gap: 6px;
}

.mpcc-header-actions button {
	border: 0;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.mpcc-body {
	padding: 12px;
}

.mpcc-expression {
	min-height: 24px;
	margin-bottom: 6px;
	font-size: 13px;
	color: #666;
	word-break: break-word;
}

.mpcc-display {
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
	font-size: 24px;
	text-align: right;
	border: 1px solid #d9d9d9;
	border-radius: 10px;
	background: #fafafa;
	margin-bottom: 10px;
}

.mpcc-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}

.mpcc-grid button {
	border: 0;
	border-radius: 10px;
	padding: 12px 8px;
	font-size: 14px;
	cursor: pointer;
	background: #000000;
	color: #fff;
}

.mpcc-grid button:hover {
	background: #333333;
	color: #fff;
}

.mpcc-grid button.op {
	background: #2f6bff;
	color: #fff;
}

.mpcc-grid button.op:hover {
	background: #2456d8;
	color: #fff;
}

.mpcc-grid button.eq {
	background: #111;
	color: #fff;
}

.mpcc-grid button.wide {
	grid-column: span 2;
}

@media (max-width: 480px) {
	#mpcc-toggle {
		right: 10px;
		bottom: 10px;
	}

	#mpcc-panel {
		right: 10px;
		bottom: 65px;
		width: calc(100vw - 20px);
	}
}