/* Smart Utility Tools Frontend Styles */
:root {
	--sut-primary: #4F46E5; /* Indigo */
	--sut-primary-hover: #4338CA;
	--sut-secondary: #EF4444; /* Red */
	--sut-secondary-hover: #DC2626;
	--sut-bg: #FFFFFF;
	--sut-text: #1F2937;
	--sut-text-light: #6B7280;
	--sut-border: #D1D5DB;
	--sut-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--sut-radius: 8px;
	--sut-radius-sm: 6px;
	--sut-input-bg: #F9FAFB;
}

.sut-calculator-wrapper {
	background: var(--sut-bg);
	border: 1px solid var(--sut-border);
	border-radius: var(--sut-radius);
	padding: 24px;
	box-shadow: var(--sut-shadow);
	max-width: 600px;
	margin: 0 auto 24px auto;
	font-family: system-ui, -apple-system, sans-serif;
	color: var(--sut-text);
}

.sut-calc-title {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--sut-text);
	border-bottom: 2px solid var(--sut-border);
	padding-bottom: 10px;
}

.sut-form-group {
	margin-bottom: 16px;
}

.sut-form-group label {
	display: block;
	margin-bottom: 6px;
	font-weight: 500;
	color: var(--sut-text);
}

.sut-input, .sut-select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--sut-border);
	border-radius: var(--sut-radius-sm);
	background-color: var(--sut-input-bg);
	color: var(--sut-text);
	font-size: 1rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.sut-input:focus, .sut-select:focus {
	outline: none;
	border-color: var(--sut-primary);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.sut-input-group {
	display: flex;
	gap: 10px;
}

.sut-input-group input {
	flex: 2;
}

.sut-input-group select {
	flex: 1;
}

.sut-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.sut-btn {
	display: inline-block;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	border: 1px solid transparent;
	padding: 10px 16px;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: var(--sut-radius-sm);
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
	cursor: pointer;
	background-color: var(--sut-primary);
	color: #fff;
	width: 100%;
}

.sut-btn:hover {
	background-color: var(--sut-primary-hover);
}

.sut-btn-secondary {
	background-color: var(--sut-secondary);
}

.sut-btn-secondary:hover {
	background-color: var(--sut-secondary-hover);
}

.sut-button-group {
	display: flex;
	gap: 10px;
}

.sut-result {
	margin-top: 20px;
	padding: 16px;
	background-color: #F3F4F6;
	border-left: 4px solid var(--sut-primary);
	border-radius: 0 var(--sut-radius-sm) var(--sut-radius-sm) 0;
	font-size: 1.1rem;
	font-weight: 500;
	word-break: break-word;
}

.sut-result.sut-error {
	border-left-color: var(--sut-secondary);
	background-color: #FEF2F2;
	color: #991B1B;
}

.sut-divider {
	border: 0;
	height: 1px;
	background: var(--sut-border);
	margin: 24px 0;
}

.sut-inline-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sut-inline-group span {
	font-weight: 500;
	white-space: nowrap;
}

.sut-percent-section h4 {
	margin-top: 0;
	margin-bottom: 12px;
	color: var(--sut-text-light);
	font-size: 1rem;
}

@media (max-width: 600px) {
	.sut-grid-2 {
		grid-template-columns: 1fr;
	}
	.sut-inline-group {
		flex-direction: column;
		align-items: stretch;
	}
	.sut-button-group {
		flex-direction: column;
	}
}