.wgc-calculator {
	--wgc-bg: #1a1f2e;
	--wgc-accent: #c9a84c;
	--wgc-text: #e0e0e0;
	--wgc-header-bg: #242a3d;
	--wgc-input-bg: rgba(255, 255, 255, 0.07);
	--wgc-border: rgba(255, 255, 255, 0.1);
	--wgc-radius: 8px;

	font-family: 'Red Hat Display', sans-serif;
	background: var(--wgc-bg);
	color: var(--wgc-text);
	padding: 24px;
	border-radius: var(--wgc-radius);
	max-width: 820px;
	margin: 0 auto;
}

.wgc-section {
	margin-bottom: 28px;
}

.wgc-section-header {
	background: var(--wgc-header-bg);
	padding: 12px 18px;
	border-radius: var(--wgc-radius) var(--wgc-radius) 0 0;
}

.wgc-section-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--wgc-accent);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wgc-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wgc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.wgc-table th {
	text-align: left;
	padding: 10px 14px;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.5);
	border-bottom: 1px solid var(--wgc-border);
}

.wgc-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--wgc-border);
	white-space: nowrap;
}

.wgc-table tbody tr:hover {
	background: rgba(255, 255, 255, 0.03);
}

.wgc-label {
	font-weight: 500;
}

.wgc-price {
	color: var(--wgc-accent);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.wgc-subtotal {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.wgc-weight {
	width: 100px;
	padding: 8px 12px;
	border: 1px solid var(--wgc-border);
	border-radius: 6px;
	background: var(--wgc-input-bg);
	color: var(--wgc-text);
	font-family: inherit;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.15s, box-shadow 0.15s;
	-moz-appearance: textfield;
}

.wgc-weight::-webkit-inner-spin-button,
.wgc-weight::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wgc-weight:focus {
	outline: none;
	border-color: var(--wgc-accent);
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.25);
}

.wgc-section-total-row td {
	padding: 12px 14px;
	font-weight: 700;
	font-size: 16px;
	border-bottom: none;
}

.wgc-section-total {
	text-align: right;
	color: var(--wgc-accent);
	font-variant-numeric: tabular-nums;
}

.wgc-grand-total-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 22px;
	margin: 8px 0 20px;
	border-radius: var(--wgc-radius);
	background: linear-gradient(135deg, rgba(201, 168, 76, 0.15), rgba(201, 168, 76, 0.05));
	border: 1px solid rgba(201, 168, 76, 0.3);
}

.wgc-grand-total-label {
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wgc-grand-total {
	font-size: 26px;
	font-weight: 800;
	color: var(--wgc-accent);
	font-variant-numeric: tabular-nums;
}

.wgc-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.wgc-updated {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.45);
}

.wgc-refresh {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	border: 1px solid var(--wgc-accent);
	border-radius: 50px;
	background: transparent;
	color: var(--wgc-accent);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}

.wgc-refresh:hover {
	background: var(--wgc-accent);
	color: var(--wgc-bg);
}

.wgc-refresh:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.wgc-refresh-icon {
	font-size: 16px;
	display: inline-block;
	transition: transform 0.4s;
}

.wgc-refresh.wgc-loading .wgc-refresh-icon {
	animation: wgc-spin 0.8s linear infinite;
}

@keyframes wgc-spin {
	to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
	.wgc-calculator {
		padding: 14px;
	}

	.wgc-table th,
	.wgc-table td {
		padding: 8px 10px;
		font-size: 14px;
	}

	.wgc-weight {
		width: 80px;
		padding: 6px 8px;
		font-size: 14px;
	}

	.wgc-grand-total-box {
		flex-direction: column;
		text-align: center;
		gap: 6px;
		padding: 14px 16px;
	}

	.wgc-grand-total {
		font-size: 22px;
	}

	.wgc-footer {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.wgc-refresh {
		justify-content: center;
	}
}