/*
 * xShipment shipping progress bar ([xship_progress_bar] and the mini-cart). Colours and sizes come from the settings as custom properties on .xship-pbar.
 * Text inherits the page (font, size, colour) unless a text colour is set; an unset bar colour uses the Breakdance brand colour.
 * Text rules sit in :where() (no weight), so any theme or Breakdance global selector restyles them.
 */

.xship-pbar { --xship-pbar-icon: max(20px, calc(var(--xship-pbar-height, 8px) * 2.2)); display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin: .75em 0; line-height: 1.4; align-self: stretch; }
:where(.xship-pbar) { color: var(--xship-pbar-text, inherit); }
.xship-pbar[hidden] { display: none; }
.xship-pbar *, .xship-pbar *::before, .xship-pbar *::after { box-sizing: border-box; }
/* Builders stretch-shrink shortcode wrappers in flex columns (see xship-selector.css). */
:where(.bde-shortcode, .bde-div, .bde-column, .elementor-widget-shortcode, .wp-block-shortcode):has(> .xship-pbar) { align-self: stretch; }

/* Two classes: page builders style every p/strong inside WooCommerce areas. */
.xship-pbar .xship-pbar__text { margin: 0 0 .55em; padding: 0; line-height: inherit; }
:where(.xship-pbar) .xship-pbar__text { font-size: inherit; color: inherit; }
:where(.xship-pbar) .xship-pbar__text strong { color: inherit; }

.xship-pbar .xship-pbar__track { position: relative; height: var(--xship-pbar-height, 8px); border-radius: var(--xship-pbar-radius, 20px); background: var(--xship-pbar-track, #e6e6e6); }
.xship-pbar .xship-pbar__fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--xship-pbar-fill, 0%); max-width: 100%; border-radius: inherit; background-color: var(--xship-pbar-color, var(--bde-brand-primary-color, #111)); transition: width .6s cubic-bezier(.22, 1, .36, 1), background-color .3s; }
.xship-pbar.is-free .xship-pbar__fill { background-color: var(--xship-pbar-free, #1a9c4a); }
.xship-pbar.is-gradient .xship-pbar__fill { background-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35)); }

/* Motion while on the way (left out once shipping is free): stripes travel forward, or a light sweeps over the fill. */
.xship-pbar.is-motion-stripes .xship-pbar__fill::before,
.xship-pbar.is-motion-shimmer .xship-pbar__fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.xship-pbar.is-motion-stripes .xship-pbar__fill::before { 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: 16px 16px; animation: xship-pbar-stripes .8s linear infinite; }
.xship-pbar.is-motion-shimmer .xship-pbar__fill::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent) no-repeat; background-size: 40% 100%; animation: xship-pbar-shimmer 1.6s ease-in-out infinite; }

/* Room above and below the track for the icons. */
.xship-pbar.has-icons .xship-pbar__track { margin-block: max(0px, calc((var(--xship-pbar-icon) - var(--xship-pbar-height, 8px)) / 2)); }

/* Head icon (truck) at the front of the fill; the fill keeps room for it at 0. */
.xship-pbar.has-head .xship-pbar__fill { min-width: calc(var(--xship-pbar-icon) / 2); }
.xship-pbar .xship-pbar__head { position: absolute; z-index: 2; top: 50%; right: 0; font-size: var(--xship-pbar-icon); line-height: 1; transform: translate(50%, -50%); transition: opacity .25s .5s; }
.xship-pbar .xship-pbar__head.is-flip { transform: translate(50%, -50%) scaleX(-1); }
.xship-pbar[class*="is-motion-"] .xship-pbar__head { animation: xship-pbar-drive .5s ease-in-out infinite; }
.xship-pbar.is-free .xship-pbar__head { opacity: 0; } /* Arrives, then makes way for the free-shipping icon. */

/* Milestone dots on the track. */
.xship-pbar .xship-pbar__mark { position: absolute; z-index: 1; top: 50%; left: var(--at); width: calc(var(--xship-pbar-height, 8px) + 8px); height: calc(var(--xship-pbar-height, 8px) + 8px); transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--xship-pbar-track, #e6e6e6); background: #fff; transition: background-color .3s, border-color .3s; }
.xship-pbar .xship-pbar__mark.is-end { transform: translate(-100%, -50%); }
.xship-pbar .xship-pbar__mark.is-reached { border-color: var(--xship-pbar-color, var(--bde-brand-primary-color, #111)); background: var(--xship-pbar-color, var(--bde-brand-primary-color, #111)); }
.xship-pbar.is-free .xship-pbar__mark { border-color: var(--xship-pbar-free, #1a9c4a); background: var(--xship-pbar-free, #1a9c4a); }

/* Free-shipping icon instead of a dot: grey until reached; at the end it sits just past the track. */
.xship-pbar .xship-pbar__mark.is-icon, .xship-pbar.is-free .xship-pbar__mark.is-icon { width: auto; height: auto; border: 0; border-radius: 0; background: none; font-size: var(--xship-pbar-icon); line-height: 1; filter: grayscale(1); opacity: .55; transition: filter .3s .4s, opacity .3s .4s; }
.xship-pbar .xship-pbar__mark.is-icon.is-reached, .xship-pbar.is-free .xship-pbar__mark.is-icon { filter: none; opacity: 1; }
.xship-pbar .xship-pbar__mark.is-icon.is-end { left: calc(100% + 4px); transform: translateY(-50%); }
.xship-pbar.has-goal .xship-pbar__track, .xship-pbar.has-goal .xship-pbar__labels { margin-inline-end: calc(var(--xship-pbar-icon) * 1.25 + 4px); }

/* Labels under the dots: price on top, threshold below. */
.xship-pbar .xship-pbar__labels { position: relative; height: 2.7em; margin-top: .45em; line-height: 1.3; }
:where(.xship-pbar) .xship-pbar__labels { font-size: .8em; }
.xship-pbar .xship-pbar__label { position: absolute; top: 0; left: var(--at); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; white-space: nowrap; opacity: .7; }
.xship-pbar .xship-pbar__label.is-end { transform: translateX(-100%); align-items: flex-end; }
.xship-pbar .xship-pbar__label.is-reached, .xship-pbar.is-free .xship-pbar__label { opacity: 1; }
:where(.xship-pbar) .xship-pbar__label b { font-weight: 700; }
:where(.xship-pbar) .xship-pbar__label small { font-size: .95em; }

.xship-pbar.is-compact { margin: .5em 0; }
.xship-pbar.is-compact .xship-pbar__text { margin-bottom: .4em; }

/* Pop when free shipping is reached (added by the script). */
.xship-pbar.is-celebrate .xship-pbar__track { animation: xship-pbar-pop .6s ease-out; }
.xship-pbar.is-celebrate .xship-pbar__mark.is-icon { animation: xship-pbar-party .8s .45s ease-out both; }

.xship-pbar.no-anim .xship-pbar__fill, .xship-pbar.no-anim .xship-pbar__mark, .xship-pbar.no-anim .xship-pbar__head { transition: none; }

@keyframes xship-pbar-stripes { from { background-position: 0 0; } to { background-position: 16px 0; } }
@keyframes xship-pbar-shimmer { from { background-position: -150% 0; } to { background-position: 250% 0; } }
@keyframes xship-pbar-drive { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.5px; } }
@keyframes xship-pbar-pop { 0% { transform: scaleY(1); } 40% { transform: scaleY(1.6); } 100% { transform: scaleY(1); } }
@keyframes xship-pbar-party { 0% { scale: 1; rotate: 0deg; } 35% { scale: 1.6; rotate: -14deg; } 65% { scale: 1.3; rotate: 10deg; } 100% { scale: 1; rotate: 0deg; } }

@media (prefers-reduced-motion: reduce) {
	.xship-pbar .xship-pbar__fill, .xship-pbar .xship-pbar__mark, .xship-pbar .xship-pbar__head { transition: none; }
	.xship-pbar .xship-pbar__fill::before, .xship-pbar .xship-pbar__fill::after, .xship-pbar .xship-pbar__head, .xship-pbar.is-celebrate .xship-pbar__track, .xship-pbar.is-celebrate .xship-pbar__mark.is-icon { animation: none; }
}