/* Calculator widget + embed (matches #muc-widget-SLUG from each tool JS) */

/* Calculator container */
.muc-calculator-wrap,
[id^="muc-widget-"] {
	background: var(--color-surface, #F3F4F6);
	border: 1px solid var(--color-border, #E5E7EB);
	border-radius: 12px;
	padding: 32px;
	margin: 24px 0;
	max-width: 680px;
	font-family: var(--font-primary, 'Inter', sans-serif);
}

/* Input fields */
[id^="muc-widget-"] input[type="number"],
[id^="muc-widget-"] input[type="text"],
[id^="muc-widget-"] input[type="date"],
[id^="muc-widget-"] select {
	width: 100%;
	height: 52px;
	padding: 12px 16px;
	font-size: 18px;
	border: 1.5px solid var(--color-border, #E5E7EB);
	border-radius: 8px;
	background: #ffffff;
	color: var(--color-text-primary, #111827);
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.2s;
	-webkit-appearance: none;
	appearance: none;
}

[id^="muc-widget-"] input:focus,
[id^="muc-widget-"] select:focus {
	border-color: var(--color-primary, #1E40AF);
	box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

/* Labels */
[id^="muc-widget-"] label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text-secondary, #6B7280);
	margin-bottom: 6px;
}

/* Input groups */
[id^="muc-widget-"] .muc-field {
	margin-bottom: 16px;
}

/* Result display */
[id^="muc-widget-"] .m,
[id^="muc-widget-"] .muc-result,
[id^="muc-widget-"] #result {
	font-size: 42px !important;
	font-weight: 700 !important;
	color: #16A34A !important;
	display: block;
	margin: 24px 0 8px;
	line-height: 1.2;
}

/* Result container */
[id^="muc-widget-"] .muc-result-box {
	background: #F0FDF4;
	border: 1px solid #BBF7D0;
	border-radius: 8px;
	padding: 20px 24px;
	margin: 20px 0;
	text-align: center;
}

/* Error messages */
[id^="muc-widget-"] .muc-err,
[id^="muc-widget-"] #re,
[id^="muc-widget-"] .err {
	color: #DC2626;
	font-size: 14px;
	margin-top: 6px;
	display: block;
}

/* Swap button */
[id^="muc-widget-"] .muc-swap,
[id^="muc-widget-"] button[id*="swap"] {
	background: var(--color-primary, #1E40AF);
	color: white;
	border: none;
	border-radius: 8px;
	padding: 12px 20px;
	font-size: 16px;
	cursor: pointer;
	margin: 8px 0;
	transition: background 0.2s;
}

[id^="muc-widget-"] .muc-swap:hover {
	background: var(--color-primary-dark, #1E3A8A);
}

/* Copy button */
[id^="muc-widget-"] .muc-copy,
[id^="muc-widget-"] button[id*="copy"],
[id^="muc-widget-"] .cp {
	background: transparent;
	color: var(--color-primary, #1E40AF);
	border: 1.5px solid var(--color-primary, #1E40AF);
	border-radius: 6px;
	padding: 6px 14px;
	font-size: 13px;
	cursor: pointer;
	margin-left: 8px;
	transition: all 0.2s;
}

[id^="muc-widget-"] .muc-copy:hover {
	background: var(--color-primary, #1E40AF);
	color: white;
}

/* Quick tip buttons */
[id^="muc-widget-"] .muc-tips button,
[id^="muc-widget-"] .tip-btn {
	background: #EFF6FF;
	color: #1E40AF;
	border: 1px solid #BFDBFE;
	border-radius: 20px;
	padding: 6px 16px;
	font-size: 13px;
	cursor: pointer;
	margin: 4px;
	transition: all 0.2s;
}

[id^="muc-widget-"] .muc-tips button:hover,
[id^="muc-widget-"] .tip-btn:hover {
	background: #1E40AF;
	color: white;
}

/* Tabs */
[id^="muc-widget-"] .muc-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--color-border, #E5E7EB);
	padding-bottom: 0;
}

[id^="muc-widget-"] .muc-tab {
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	border: none;
	background: transparent;
	color: var(--color-text-secondary, #6B7280);
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: all 0.2s;
}

[id^="muc-widget-"] .muc-tab.active,
[id^="muc-widget-"] .muc-tab[aria-selected="true"] {
	color: var(--color-primary, #1E40AF);
	border-bottom-color: var(--color-primary, #1E40AF);
}

/* Reference table */
[id^="muc-widget-"] table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
	font-size: 14px;
}

[id^="muc-widget-"] table th {
	background: var(--color-surface, #F3F4F6);
	padding: 10px 12px;
	text-align: left;
	font-weight: 600;
	color: var(--color-text-primary, #111827);
	border-bottom: 2px solid var(--color-border, #E5E7EB);
}

[id^="muc-widget-"] table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--color-border, #E5E7EB);
	color: var(--color-text-secondary, #6B7280);
}

[id^="muc-widget-"] table tr:nth-child(even) td {
	background: #F9FAFB;
}

/* Slider input */
[id^="muc-widget-"] input[type="range"] {
	width: 100%;
	height: 6px;
	accent-color: var(--color-primary, #1E40AF);
	cursor: pointer;
}

/* Page shell (not from embed) */
.muc-calc-page {
	padding-bottom: var(--space-16, 3rem);
}

.muc-calc-herohead__h {
	font-size: var(--font-size-3xl, 1.875rem);
	margin: 0 0 var(--space-2, 0.5rem);
}

.muc-calc-herohead__sub {
	font-size: var(--font-size-lg, 1.125rem);
	color: var(--color-text-secondary, #6B7280);
	margin: 0 0 var(--space-6, 1.5rem);
}

#calculator-widget-area.muc-calculator-area,
.muc-calculator-area {
	margin: 0 0 var(--space-6, 1.5rem);
}

.muc-breadcrumb {
	margin-bottom: var(--space-4, 1rem);
	font-size: 0.875rem;
}

.muc-breadcrumb a {
	color: var(--color-primary, #1E40AF);
	text-decoration: none;
}

.muc-breadcrumb a:hover {
	text-decoration: underline;
}

.muc-breadcrumb__current {
	color: var(--color-text-secondary, #6B7280);
}

.muc-ad,
.muc-faq-wrap,
.muc-relatedtools {
	margin-top: var(--space-8, 2rem);
}

.muc-articleprose__h2 {
	font-size: var(--font-size-2xl, 1.5rem);
	margin: 0 0 var(--space-3, 0.75rem);
}

.muc-ad__label {
	font-size: 0.75rem;
	color: var(--color-text-secondary, #6B7280);
	margin: 0 0 0.5rem;
}

.muc-ad__box,
.muc-ad-placeholder {
	border: 1px dashed var(--color-border, #E5E7EB);
	border-radius: 8px;
	padding: 1.5rem;
	text-align: center;
	color: var(--color-text-secondary, #6B7280);
	background: var(--color-surface, #F9FAFB);
}

.muc-faq {
	border: 1px solid var(--color-border, #E5E7EB);
	border-radius: 8px;
	margin-bottom: 0.5rem;
	overflow: hidden;
}

.muc-faq__q {
	width: 100%;
	text-align: left;
	padding: 1rem 1.25rem;
	font: 500 1rem var(--font-primary, 'Inter', sans-serif);
	color: var(--color-text-primary, #111827);
	background: #fff;
	border: none;
	cursor: pointer;
}

.muc-faq__a {
	padding: 0 1.25rem 1rem;
	color: var(--color-text-secondary, #6B7280);
	font-size: 0.875rem;
}

.muc-faq__a[hidden] {
	display: none;
}

.muc-toolmini {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--color-border, #E5E7EB);
	border-radius: 8px;
	padding: 1rem;
}

.muc-toolmini:hover {
	border-color: var(--color-primary, #1E40AF);
}

.muc-toolmini__n {
	font-weight: 600;
	color: var(--color-text-primary, #111827);
}

.muc-authorbox {
	max-width: 40rem;
	margin: 2rem auto 0;
	padding: 1rem;
	border: 1px solid var(--color-border, #E5E7EB);
	border-radius: 8px;
}

.muc-relatedtools__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

@media (min-width: 900px) {
	.muc-relatedtools__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Mobile responsive */
@media (max-width: 640px) {
	[id^="muc-widget-"] {
		padding: 20px 16px;
	}

	[id^="muc-widget-"] .m,
	[id^="muc-widget-"] .muc-result {
		font-size: 32px !important;
	}

	[id^="muc-widget-"] input[type="number"],
	[id^="muc-widget-"] input[type="text"],
	[id^="muc-widget-"] select {
		font-size: 16px;
		height: 48px;
	}
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	[id^="muc-widget-"] {
		background: #1E293B;
		border-color: #334155;
	}

	[id^="muc-widget-"] input,
	[id^="muc-widget-"] select {
		background: #0F172A;
		border-color: #334155;
		color: #F1F5F9;
	}

	[id^="muc-widget-"] label {
		color: #94A3B8;
	}
}