/**
 * Customer Savings for WooCommerce frontend styles.
 */

:root {
	--cfsw-accent: #087255;
	--cfsw-accent-dark: #063f32;
	--cfsw-surface: #f5fcf8;
	--cfsw-surface-strong: #e5f6ed;
	--cfsw-border: rgba(8, 114, 85, 0.22);
	--cfsw-shadow: 0 10px 26px rgba(6, 63, 50, 0.1);
}

.cfsw-savings-row > th,
.cfsw-savings-row > td {
	background-color: var(--cfsw-surface);
	background-image: linear-gradient(135deg, var(--cfsw-surface) 0%, var(--cfsw-surface-strong) 100%);
	border-block: 1px solid var(--cfsw-border) !important;
	color: var(--cfsw-accent-dark);
	padding: 14px 16px !important;
	vertical-align: middle;
}

.cfsw-savings-row > th {
	border-end-start-radius: 14px;
	border-inline-start: 1px solid var(--cfsw-border) !important;
	border-start-start-radius: 14px;
	box-shadow: -8px 10px 24px rgba(6, 63, 50, 0.07);
}

.cfsw-savings-row > td {
	border-end-end-radius: 14px;
	border-inline-end: 1px solid var(--cfsw-border) !important;
	border-start-end-radius: 14px;
	box-shadow: 8px 10px 24px rgba(6, 63, 50, 0.07);
}

.cfsw-savings-label,
.cfsw-block-savings__label {
	align-items: center;
	display: inline-flex;
	font-size: 0.96em;
	font-weight: 750;
	gap: 10px;
	letter-spacing: 0.01em;
	line-height: 1.35;
}

.cfsw-savings-icon {
	align-items: center;
	background: linear-gradient(145deg, #0c8b66 0%, var(--cfsw-accent) 58%, #07563f 100%);
	border: 2px solid rgba(255, 255, 255, 0.72);
	border-radius: 999px;
	box-shadow: 0 5px 14px rgba(8, 114, 85, 0.25);
	color: #fff;
	display: inline-flex;
	flex: 0 0 28px;
	font-size: 14px;
	font-weight: 800;
	height: 28px;
	justify-content: center;
	line-height: 1;
	width: 28px;
}

.cfsw-savings-amount,
.cfsw-savings-amount .woocommerce-Price-amount,
.cfsw-block-savings__amount {
	color: #fff !important;
	font-size: 1.02em;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.cfsw-savings-amount,
.cfsw-block-savings__amount {
	align-items: center;
	background: var(--cfsw-accent);
	border: 1px solid rgba(6, 63, 50, 0.14);
	border-radius: 999px;
	box-shadow: 0 5px 14px rgba(8, 114, 85, 0.2);
	display: inline-flex;
	justify-content: center;
	min-height: 34px;
	padding: 6px 12px;
}

.cfsw-block-savings-wrapper {
	margin-top: 12px;
	padding: 0;
}

.cfsw-block-savings {
	align-items: center;
	background-color: var(--cfsw-surface);
	background-image: linear-gradient(135deg, var(--cfsw-surface) 0%, var(--cfsw-surface-strong) 100%);
	border: 1px solid var(--cfsw-border);
	border-radius: 14px;
	box-shadow: var(--cfsw-shadow);
	color: var(--cfsw-accent-dark);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	min-height: 62px;
	padding: 14px 16px;
}

@media (max-width: 480px) {
	.cfsw-savings-row > th,
	.cfsw-savings-row > td {
		padding: 12px !important;
	}

	.cfsw-block-savings {
		gap: 10px;
		min-height: 56px;
		padding: 12px;
	}

	.cfsw-savings-label,
	.cfsw-block-savings__label {
		font-size: 0.92em;
		gap: 8px;
	}

	.cfsw-savings-icon {
		flex-basis: 25px;
		font-size: 12px;
		height: 25px;
		width: 25px;
	}

	.cfsw-savings-amount,
	.cfsw-block-savings__amount {
		min-height: 31px;
		padding: 5px 10px;
	}
}

@media (prefers-contrast: more) {
	.cfsw-savings-row > th,
	.cfsw-savings-row > td,
	.cfsw-block-savings {
		border-color: var(--cfsw-accent-dark) !important;
	}
}

@media (forced-colors: active) {
	.cfsw-savings-row > th,
	.cfsw-savings-row > td,
	.cfsw-block-savings,
	.cfsw-savings-icon,
	.cfsw-savings-amount,
	.cfsw-block-savings__amount {
		background: Canvas;
		border: 1px solid CanvasText !important;
		box-shadow: none;
		color: CanvasText !important;
	}
}