/* ============================================================
   Shipping Info Display — Frontend Styles
   ============================================================ */

.sid-shipping-info {
	margin: 16px 0;
	padding: 14px 18px;
	border: 1px solid #e0e0e0;
	border-radius: 5px;
	background: #f9f9f9;
	font-size: 0.9em;
	line-height: 1.6;
}

/* Optional heading */
.sid-heading {
	margin: 0 0 10px;
	font-size: 0.95em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #555;
	font-weight: 700;
}

/* Each row */
.sid-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px 0;
	border-bottom: 1px dashed #eaeaea;
}

.sid-row:last-child {
	border-bottom: none;
}

/* Icon */
.sid-icon {
	margin-right: 4px;
	font-style: normal;
}

/* Label */
.sid-label {
	font-weight: 600;
	white-space: nowrap;
}

/* Value */
.sid-value {
	color: #333;
}

/* Methods in parentheses */
.sid-methods {
	color: #777;
	font-size: 0.9em;
}

/* Free shipping amount */
.sid-free-amount {
	font-weight: 700;
	color: #2e7d32;
}

/* ── Progress bar ── */
.sid-progress {
	margin-top: 8px;
	width: 100%;
}

.sid-progress-bar {
	height: 6px;
	background: #ddd;
	border-radius: 3px;
	overflow: hidden;
}

.sid-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #43a047, #66bb6a);
	border-radius: 3px;
	transition: width 0.4s ease;
}

.sid-progress-label {
	margin: 5px 0 0;
	font-size: 0.85em;
	color: #555;
}

/* Free shipping achieved */
.sid-free-achieved {
	margin: 6px 0 0;
	font-size: 0.88em;
	color: #2e7d32;
	font-weight: 600;
}

/* ── Dark / high-contrast themes support ── */
@media (prefers-color-scheme: dark) {
	.sid-shipping-info {
		background: rgba(255, 255, 255, 0.04);
		border-color: rgba(255, 255, 255, 0.12);
	}

	.sid-heading,
	.sid-label {
		color: #ccc;
	}

	.sid-value,
	.sid-methods {
		color: #ddd;
	}

	.sid-row {
		border-bottom-color: rgba(255, 255, 255, 0.08);
	}

	.sid-progress-bar {
		background: #444;
	}
}

/* ── Custom note ── */
.sid-row--note {
	border-top: 1px dashed #e0e0e0;
	margin-top: 4px;
}

.sid-note {
	color: #777;
	font-size: 0.85em;
	font-style: italic;
}