/**
 * Progress bar δωρεάν μεταφορικών.
 * Τα χρώματα/radius έρχονται ως CSS custom properties (--clwc-bar-*),
 * ορισμένα δυναμικά μέσω wp_add_inline_style() από τις ρυθμίσεις του admin.
 */
.clwc-shipping-bar {
	margin: 18px 0;
}
.clwc-shipping-bar--card {
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--clwc-bar-card-bg, rgba(var(--clwc-bar-color-rgb, 76, 175, 80), .06));
	border: 1px solid var(--clwc-bar-card-border, rgba(var(--clwc-bar-color-rgb, 76, 175, 80), .14));
	transition: background-color .3s ease, border-color .3s ease;
}
.clwc-shipping-bar__msg {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--clwc-bar-text, #333333);
	letter-spacing: -.01em;
	line-height: 1.4;
}
.clwc-shipping-bar__track {
	background: var(--clwc-bar-bg, #e5e5e5);
	border-radius: var(--clwc-bar-radius, 30px);
	height: 10px;
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
	position: relative;
}
.clwc-shipping-bar__fill {
	background-image: linear-gradient(90deg, var(--clwc-bar-color, #4CAF50), rgba(var(--clwc-bar-color-rgb, 76, 175, 80), .78));
	height: 100%;
	border-radius: var(--clwc-bar-radius, 30px);
	transition: width 1s cubic-bezier(.22, .61, .36, 1);
	position: relative;
	overflow: hidden;
}
/* Απαλό "shimmer" sweep που περνάει συνέχεια πάνω από το γέμισμα — δίνει μια
   ζωντανή, "premium" αίσθηση χωρίς να αποσπά την προσοχή. Ενεργό μόνο όταν
   υπάρχει το modifier class (toggle από τα admin settings). */
.clwc-shipping-bar--shimmer .clwc-shipping-bar__fill::after {
	content: '';
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
	transform: translateX(-100%);
	animation: clwc-shimmer 2.4s ease-in-out infinite;
}
.clwc-shipping-bar__track--striped .clwc-shipping-bar__fill {
	background-image: linear-gradient(45deg, rgba(255,255,255,.25) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.25) 50%, rgba(255,255,255,.25) 75%, transparent 75%, transparent), linear-gradient(90deg, var(--clwc-bar-color, #4CAF50), rgba(var(--clwc-bar-color-rgb, 76, 175, 80), .78));
	background-size: 24px 24px, 100% 100%;
	animation: clwc-stripes 1s linear infinite;
}
.clwc-shipping-bar--card.is-complete {
	background: rgba(var(--clwc-bar-color-rgb, 76, 175, 80), .12);
	border-color: rgba(var(--clwc-bar-color-rgb, 76, 175, 80), .3);
}
.clwc-shipping-bar.is-complete .clwc-shipping-bar__fill {
	animation: clwc-pulse 1.4s ease-in-out 1;
}
.clwc-shipping-bar.is-complete .clwc-shipping-bar__msg {
	font-weight: 700;
}
@keyframes clwc-shimmer {
	0%   { transform: translateX(-100%); }
	50%  { transform: translateX(100%); }
	100% { transform: translateX(100%); }
}
@keyframes clwc-stripes {
	from { background-position: 0 0, 0 0; }
	to   { background-position: 24px 0, 0 0; }
}
@keyframes clwc-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(var(--clwc-bar-color-rgb, 76, 175, 80), .4); }
	70%  { box-shadow: 0 0 0 8px rgba(var(--clwc-bar-color-rgb, 76, 175, 80), 0); }
	100% { box-shadow: 0 0 0 0 rgba(var(--clwc-bar-color-rgb, 76, 175, 80), 0); }
}