/* PS UX Builder Addons — Progress Bar */

.ps-uxb-progress { --ps-progress-height: 12px; --ps-progress-radius: 30px; --ps-progress-bar: #446084; --ps-progress-track: #eceff3; margin-bottom: 1.2em; }
.ps-uxb-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.ps-uxb-progress__head:empty { display: none; }
.ps-uxb-progress__title { font-weight: 600; }
.ps-uxb-progress__value { font-variant-numeric: tabular-nums; font-weight: 600; }
.ps-uxb-progress__body { display: flex; align-items: center; gap: 10px; }
.ps-uxb-progress__track { position: relative; flex: 1 1 auto; height: var(--ps-progress-height); background: var(--ps-progress-track); border-radius: var(--ps-progress-radius); overflow: hidden; }
.ps-uxb-progress__bar { display: flex; align-items: center; justify-content: flex-end; width: 0; height: 100%; padding: 0 8px; background: var(--ps-progress-bar); border-radius: inherit; transition: width var(--ps-progress-duration, 1600ms) cubic-bezier(.16, 1, .3, 1); }
.ps-uxb-progress--value-inside .ps-uxb-progress__value { color: #fff; font-size: .78em; line-height: 1; white-space: nowrap; }
.ps-uxb-progress--value-right .ps-uxb-progress__value { flex: 0 0 auto; min-width: 3.2em; text-align: right; }
.ps-uxb-progress--striped .ps-uxb-progress__bar,
.ps-uxb-progress--animated .ps-uxb-progress__bar { background-image: linear-gradient(45deg, rgba(255, 255, 255, .22) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, .22) 75%, transparent 75%, transparent); background-size: 1.2rem 1.2rem; }
.ps-uxb-progress--animated .ps-uxb-progress__bar { animation: psUxbStripes 1s linear infinite; }

@keyframes psUxbStripes { from { background-position: 0 0; } to { background-position: 1.2rem 0; } }

@media (prefers-reduced-motion: reduce) {
	.ps-uxb-progress__bar { transition: none; }
	.ps-uxb-progress--animated .ps-uxb-progress__bar { animation: none; }
}