/* Progress Bar App - CSS with Proper Naming */
.progress-bar {
  display: block !important;
  width: 100% !important;
  line-height: 1.4 !important;
  position: static !important;
  z-index: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  float: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  /* Ensure the progress bar stays in the document flow */
  clear: both !important;
  /* Prevent any theme interference */
  transform: none !important;
  min-height: 100px !important; /* Force minimum height */
  /* Ensure no unwanted spacing from themes */
  margin: 0 !important;
  padding: 0 !important;
  /* Force remove any spacing */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Progress bar specific styles */
.progress-bar-container {
  display: block !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  clear: both !important;
  margin: 0 !important;
  /* padding removed - controlled by JavaScript */
  /* Ensure proper rendering */
  position: static !important;
  z-index: auto !important;
  transform: none !important;
  /* Force visibility */
  min-height: 1px !important;
  overflow: visible !important;
  /* Ensure no unwanted spacing from themes */
  padding: 0 !important;
}

/* Enhanced goal section styling */
.progress-bar-container .goal-section {
  position: relative !important;
  transition: all 0.3s ease-in-out !important;
}

.progress-bar-container .goal-section.active {
  transform: scale(1.02) !important;
}

.progress-bar-container .goal-section::after {
  content: '' !important;
  position: absolute !important;
  right: -4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 2px !important;
  height: 60% !important;
  background: linear-gradient(to bottom, transparent, #d0d0d0, transparent) !important;
  z-index: 1 !important;
}

.progress-bar-container .goal-section:last-child::after {
  display: none !important;
}

.progress-bar-background {
  display: block !important;
  width: 100% !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #e0e0e0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Ensure proper rendering */
  min-height: 10px !important;
  border-radius: 10px !important;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px inset !important;
}

.progress-bar-fill {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: width 0.3s ease-in-out !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Ensure proper rendering */
  min-width: 0% !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, rgb(0, 212, 170) 0%, rgb(0, 124, 91) 100%) !important;
}

/* Goal-specific progress bar fills */
.goal-1-fill,
.goal-2-fill,
.goal-3-fill,
.goal-4-fill,
.goal-5-fill {
  display: block !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Ensure proper rendering */
  min-width: 0% !important;
  border-radius: 10px !important;
  z-index: 1 !important;
}

/* Checkpoint progress bar specific styles - to prevent theme overrides */
.progress-bar-container .checkpoint-progress-line {
  /* height, left, right controlled by inline styles */
  /* background removed - controlled by JavaScript */
  border-radius: 10px !important;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px inset !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  display: block !important;
}

.progress-bar-container .checkpoint-active-line {
  /* height, left controlled by inline styles */
  /* background removed - controlled by JavaScript */
  border-radius: 10px !important;
  box-shadow: rgba(0, 124, 91, 0.3) 0px 2px 8px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.progress-bar-container .checkpoint-element {
  position: absolute !important;
  border-radius: 50% !important;
  border: 2px solid rgb(255, 255, 255) !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: bold !important;
  line-height: 1 !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.progress-bar-container .checkpoint-element.completed {
  /* background removed - controlled by JavaScript */
  color: white !important;
}

.progress-bar-container .checkpoint-element.inactive {
  /* background removed - controlled by JavaScript */
  color: rgb(99, 115, 129) !important;
}

/* Even more specific selectors to override theme CSS */
.progress-bar .progress-bar-container .checkpoint-progress-line,
.progress-bar .progress-bar-container .checkpoint-active-line,
.progress-bar .progress-bar-container .checkpoint-element,
.progress-bar .progress-bar-container .checkpoint-element.completed,
.progress-bar .progress-bar-container .checkpoint-element.inactive {
  /* Remove theme overrides without resetting positioning */
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.progress-bar .progress-bar-container .checkpoint-progress-line {
  /* height, left, right controlled by inline styles */
  /* background removed - controlled by JavaScript */
  border-radius: 10px !important;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px inset !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  display: block !important;
}

.progress-bar .progress-bar-container .checkpoint-active-line {
  /* height, left controlled by inline styles */
  /* background removed - controlled by JavaScript */
  border-radius: 10px !important;
  box-shadow: rgba(0, 124, 91, 0.3) 0px 2px 8px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  display: block !important;
}

.progress-bar .progress-bar-container .checkpoint-element {
  position: absolute !important;
  border-radius: 50% !important;
  border: 2px solid rgb(255, 255, 255) !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: bold !important;
  line-height: 1 !important;
  z-index: 5 !important;
  pointer-events: none !important;
  top: 0px !important;
  transform: translateX(-50%) !important;
  /* Prevent viewport scaling issues */
  transform-origin: center center !important;
  box-sizing: border-box !important;
  /* Remove hardcoded sizing - let inline styles control the size */
  /* Force inline styles to take precedence */
  font-size: inherit !important;
  width: inherit !important;
  height: inherit !important;
}

.progress-bar .progress-bar-container .checkpoint-element.completed {
  /* background removed - controlled by JavaScript */
  color: white !important;
}

.progress-bar .progress-bar-container .checkpoint-element.inactive {
  /* background removed - controlled by JavaScript */
  color: rgb(99, 115, 129) !important;
}

/* Goal-specific progress bar containers */
.goal-1-progress-bar,
.goal-2-progress-bar,
.goal-3-progress-bar,
.goal-4-progress-bar,
.goal-5-progress-bar {
  display: flex !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Ensure proper rendering */
  border-radius: 10px !important;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px inset !important;
  /* Ensure minimum height for visibility */
  min-height: 4px !important;
  height: auto !important;
}

/* Reset only specific elements, not all */
.progress-bar .ql-editor * {
  margin: 0 !important;
}

/* Ensure inner content stays positioned correctly */
.progress-bar > div {
  position: static !important;
  float: none !important;
  clear: both !important;
  transform: none !important;
  z-index: auto !important;
}

/* Debug styles to ensure visibility */

.progress-bar .ql-editor p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

.progress-bar .ql-editor {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Pulse animation for the pulse icon */
@keyframes radar-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.8);
    opacity: 0.4;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@keyframes radar-pulse-smooth {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  25% {
    transform: scale(1.3);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.7);
    opacity: 0.4;
  }
  75% {
    transform: scale(2.0);
    opacity: 0.2;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.pulse-dot {
  position: relative;
  border-radius: 50%;
  z-index: 1;
  /* Ensure pulse animation is never interrupted */
  animation-play-state: running !important;
  /* Ensure proper centering for all animations */
  transform-origin: center center !important;
}

/* Ensure pulse animation continues even during counter animations */
.pulse-dot::before,
.pulse-dot::after {
  animation-play-state: running !important;
}

.pulse-dot::before,
.pulse-dot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background-color: var(--pulse-color);
  z-index: 2;
  animation: radar-pulse-smooth var(--pulse-speed) ease-out infinite;
  will-change: transform, opacity;
  animation-fill-mode: both;
  /* Prevent any interference with the animation */
  pointer-events: none;
  transform-origin: center center !important;
  backface-visibility: hidden;
  /* Ensure consistent timing */
  animation-timing-function: ease-out;
}

.pulse-dot::after {
  animation-delay: calc(var(--pulse-speed) / 2);
}

.pulse-dot-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  border-radius: 50%;
  z-index: 3;
  transform-origin: center center !important;
}

/* Animation keyframes */
@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes scale {
  0% { transform: scale(0.5); }
  100% { transform: scale(1); }
}

@keyframes urgency {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes countdown {
  0% { transform: scale(1); }
  50% { transform: scale(0.8); }
  100% { transform: scale(1); }
}

@keyframes attention {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

@keyframes heartbeat {
  0% { transform: scale(1); }
  12% { transform: scale(1.12); }
  20% { transform: scale(1.02); }
  30% { transform: scale(1.12); }
  45% { transform: scale(1); }
  80% { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes ticktock {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(6deg); }
  30% { transform: rotate(0deg); }
  50% { transform: rotate(-6deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* Animation classes */
.animate-fade {
  animation: fade var(--animation-duration) ease-in-out !important;
  transform-origin: center center !important;
}

.animate-slide {
  animation: slide var(--animation-duration) ease-in-out !important;
  transform-origin: center center !important;
}

.animate-bounce {
  animation: bounce var(--animation-duration) ease-in-out !important;
  transform-origin: center center !important;
}

.animate-scale {
  animation: scale var(--animation-duration) ease-in-out !important;
  transform-origin: center center !important;
}

.animate-urgency {
  animation: urgency var(--animation-duration) ease-in-out !important;
  transform-origin: center center !important;
}

.animate-flash {
  animation: flash var(--animation-duration) ease-in-out !important;
  transform-origin: center center !important;
}

.animate-countdown {
  animation: countdown var(--animation-duration) ease-in-out !important;
  transform-origin: center center !important;
}

.animate-attention {
  animation: attention var(--animation-duration) ease-in-out !important;
  transform-origin: center center !important;
}

.animate-heartbeat {
  animation: heartbeat var(--animation-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  transform-origin: center center !important;
}

.animate-ticktock {
  animation: ticktock var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform-origin: center center !important;
}

.animate-fade-repeating {
  animation: fade var(--animation-duration) ease-in-out infinite !important;
  transform-origin: center center !important;
}

.animate-slide-repeating {
  animation: slide var(--animation-duration) ease-in-out infinite !important;
  transform-origin: center center !important;
}

.animate-bounce-repeating {
  animation: bounce var(--animation-duration) ease-in-out infinite !important;
  transform-origin: center center !important;
}

.animate-scale-repeating {
  animation: scale var(--animation-duration) ease-in-out infinite !important;
  transform-origin: center center !important;
}

.animate-urgency-repeating {
  animation: urgency var(--animation-duration) ease-in-out infinite !important;
  transform-origin: center center !important;
}

.animate-flash-repeating {
  animation: flash var(--animation-duration) ease-in-out infinite !important;
  transform-origin: center center !important;
}

.animate-countdown-repeating {
  animation: countdown var(--animation-duration) ease-in-out infinite !important;
  transform-origin: center center !important;
}

.animate-attention-repeating {
  animation: attention var(--animation-duration) ease-in-out infinite !important;
  transform-origin: center center !important;
}

.animate-heartbeat-repeating {
  animation: heartbeat var(--animation-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite !important;
  transform-origin: center center !important;
}

.animate-ticktock-repeating {
  animation: ticktock var(--animation-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  transform-origin: center center !important;
}



/* Quill font size classes for theme extension */
.ql-editor .ql-size-8px {
  font-size: 8px !important;
}

.ql-editor .ql-size-10px {
  font-size: 10px !important;
}

.ql-editor .ql-size-12px {
  font-size: 12px !important;
}

.ql-editor .ql-size-14px {
  font-size: 14px !important;
}

.ql-editor .ql-size-16px {
  font-size: 16px !important;
}

.ql-editor .ql-size-18px {
  font-size: 18px !important;
}

.ql-editor .ql-size-20px {
  font-size: 20px !important;
}

.ql-editor .ql-size-22px {
  font-size: 22px !important;
}

.ql-editor .ql-size-24px {
  font-size: 24px !important;
}

.ql-editor .ql-size-26px {
  font-size: 26px !important;
}

.ql-editor .ql-size-28px {
  font-size: 28px !important;
}

.ql-editor .ql-size-30px {
  font-size: 30px !important;
}

.ql-editor .ql-size-32px {
  font-size: 32px !important;
}

/* Additional font size classes for progress bar content - more specific and immediate */
.progress-bar-container .ql-size-8px,
.preview-content .ql-size-8px,
.ql-editor .ql-size-8px {
  font-size: 8px !important;
}

.progress-bar-container .ql-size-10px,
.preview-content .ql-size-10px,
.ql-editor .ql-size-10px {
  font-size: 10px !important;
}

.progress-bar-container .ql-size-12px,
.preview-content .ql-size-12px,
.ql-editor .ql-size-12px {
  font-size: 12px !important;
}

.progress-bar-container .ql-size-14px,
.preview-content .ql-size-14px,
.ql-editor .ql-size-14px {
  font-size: 14px !important;
}

.progress-bar-container .ql-size-16px,
.preview-content .ql-size-16px,
.ql-editor .ql-size-16px {
  font-size: 16px !important;
}

.progress-bar-container .ql-size-18px,
.preview-content .ql-size-18px,
.ql-editor .ql-size-18px {
  font-size: 18px !important;
}

.progress-bar-container .ql-size-20px,
.preview-content .ql-size-20px,
.ql-editor .ql-size-20px {
  font-size: 20px !important;
}

.progress-bar-container .ql-size-22px,
.preview-content .ql-size-22px,
.ql-editor .ql-size-22px {
  font-size: 22px !important;
}

.progress-bar-container .ql-size-24px,
.preview-content .ql-size-24px,
.ql-editor .ql-size-24px {
  font-size: 24px !important;
}

.progress-bar-container .ql-size-26px,
.preview-content .ql-size-26px,
.ql-editor .ql-size-26px {
  font-size: 26px !important;
}

.progress-bar-container .ql-size-28px,
.preview-content .ql-size-28px,
.ql-editor .ql-size-28px {
  font-size: 28px !important;
}

.progress-bar-container .ql-size-30px,
.preview-content .ql-size-30px,
.ql-editor .ql-size-30px {
  font-size: 30px !important;
}

.progress-bar-container .ql-size-32px,
.preview-content .ql-size-32px,
.ql-editor .ql-size-32px {
  font-size: 32px !important;
}

/* Transparent styling for progress bar message placeholder */
.progress-bar-message-placeholder {
  opacity: 0 !important;
  color: transparent !important;
  background-color: transparent !important;
  padding: 8px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
} 

/* Override any theme spacing that might affect the progress bar */
.progress-bar {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Cart progress bar specific spacing overrides */
.cart-progress-bar {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure cart progress bar gets same internal padding treatment as product pages */
.cart-progress-bar .progress-bar-container {
  display: flex !important;
  flex-direction: column !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  overflow: visible !important;
}

/* Cart progress bar internal padding adjustments */
.cart-progress-bar .progress-bar-container > div:first-child {
  /* Top message container - padding controlled by JavaScript */
}

.cart-progress-bar .progress-bar-container > div:last-child {
  /* Bottom message container - padding controlled by JavaScript */
}

/* Ensure no spacing from theme form elements */
.progress-bar + *,
.progress-bar-container + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

* + .progress-bar,
* + .progress-bar-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure Add to Cart button and form elements don't have unwanted spacing */
.progress-bar + button,
.progress-bar + .product-form__submit,
.progress-bar + [data-add-to-cart],
.progress-bar + form,
.progress-bar + .product-form,
.progress-bar + .product__form {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Cart progress bar spacing with cart elements */
.cart-progress-bar + .cart__items,
.cart-progress-bar + .cart-items,
.cart-progress-bar + [data-cart-items],
.cart-progress-bar + .cart__contents,
.cart-progress-bar + .cart-contents,
.cart-progress-bar + .cart__header,
.cart-progress-bar + .cart-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Firefox-specific fixes for padding differences */
@-moz-document url-prefix() {
  /* Balanced padding reduction for Firefox to match Chrome appearance */
  /* Only apply to bottom message container, not top message container */
  .bottom-message-container {
    padding-bottom: calc(var(--firefox-padding-reduction, 2px)) !important;
  }
  
  /* Ensure top message container gets proper padding in Firefox */
  .progress-bar-container > div:first-child {
    padding-bottom: var(--top-message-padding-bottom, inherit) !important;
  }
  
  /* Additional targeting for top message container with style attribute */
  .progress-bar-container > div[style*="padding-bottom"]:first-child {
    padding-bottom: var(--top-message-padding-bottom, inherit) !important;
  }
  
  /* Reduce overall progress bar section padding in Firefox */
  .progress-bar {
    padding-bottom: calc(var(--firefox-padding-reduction, 2px)) !important;
  }
  
  /* Ensure consistent spacing for bottom messages in Firefox */
  .progress-bar-container .ql-editor {
    padding-bottom: calc(var(--firefox-padding-reduction, 1px)) !important;
  }
  
  /* Additional reduction for bottom message container specifically */
  .bottom-message-container {
    padding-bottom: calc(var(--bottom-message-padding, inherit) - 2px) !important;
  }
  
  /* Additional Firefox-specific rule to ensure padding is applied - only for bottom message container */
  .progress-bar-container > div:last-child.bottom-message-container {
    padding-bottom: var(--bottom-message-padding, inherit) !important;
  }
  
  /* Specific rule for bottom message container in Firefox */
  .bottom-message-container {
    padding-bottom: var(--bottom-message-padding, inherit) !important;
  }
  
  /* Balanced margin reduction for Firefox */
  .progress-bar-container {
    margin-bottom: calc(var(--firefox-margin-reduction, 12px)) !important;
  }
  
  /* Reduce spacing between progress bar and add to cart button in Firefox */
  .progress-bar + button,
  .progress-bar + .product-form__submit,
  .progress-bar + [data-add-to-cart] {
    margin-top: calc(var(--firefox-margin-reduction, 12px)) !important;
  }
  
  /* Target the main progress bar element for external margin reduction */
  .progress-bar {
    margin-bottom: calc(var(--firefox-margin-reduction, 12px)) !important;
  }
  
  /* Additional targeting for any wrapper elements */
  [data-progress-bar] {
    margin-bottom: calc(var(--firefox-margin-reduction, 12px)) !important;
  }
  
  /* Target any element with progress bar classes for margin reduction */
  [class*="progress-bar"] {
    margin-bottom: calc(var(--firefox-margin-reduction, 12px)) !important;
  }
  
  /* Additional bottom message top padding reduction for linear progress bars in Firefox */
  .progress-bar-container[data-progress-style="linear"] .bottom-message-container {
    padding-top: calc(var(--bottom-message-padding-top, inherit) - 12px) !important;
  }
  
  /* Alternative selector for linear progress bars */
  .progress-bar-container .bottom-message-container[data-linear-progress="true"] {
    padding-top: calc(var(--bottom-message-padding-top, inherit) - 12px) !important;
  }
  
  /* More specific targeting for linear progress bar bottom messages */
  .progress-bar[data-progress-style="linear"] .bottom-message-container,
  .progress-bar-container[data-progress-style="linear"] .bottom-message-container {
    padding-top: calc(var(--bottom-message-padding-top, inherit) - 12px) !important;
  }
  
  /* CSS variable-based reduction for linear progress bars */
  .progress-bar-container[data-progress-style="linear"] .bottom-message-container {
    --firefox-linear-padding-reduction: 12px;
    padding-top: calc(var(--bottom-message-padding-top, inherit) - var(--firefox-linear-padding-reduction, 12px)) !important;
  }
  
  /* Cart-specific Firefox adjustments */
  .cart-progress-bar {
    margin-bottom: calc(var(--firefox-margin-reduction, 12px)) !important;
  }
  
  /* Ensure cart progress bar gets proper spacing in Firefox */
  .cart-progress-bar .progress-bar-container {
    margin-bottom: calc(var(--firefox-margin-reduction, 12px)) !important;
  }
  
  /* Cart progress bar external spacing adjustments */
  .cart-progress-bar[style*="margin-bottom"] {
    margin-bottom: calc(var(--firefox-margin-reduction, 12px)) !important;
  }
  
  /* Cart progress bar internal padding adjustments (same as product pages) */
  /* Only apply to bottom message container, not top message container */
  .cart-progress-bar .bottom-message-container {
    padding-bottom: calc(var(--firefox-padding-reduction, 2px)) !important;
  }
  
  /* Ensure cart progress bar top message container gets proper padding in Firefox */
  .cart-progress-bar .progress-bar-container > div:first-child {
    padding-bottom: var(--top-message-padding-bottom, inherit) !important;
  }
  
  /* Cart progress bar bottom message container Firefox adjustments */
  .cart-progress-bar .bottom-message-container {
    padding-bottom: calc(var(--bottom-message-padding, inherit) - 2px) !important;
  }
  
  /* Cart progress bar bottom message container Firefox padding enforcement - only for bottom message container */
  .cart-progress-bar .progress-bar-container > div:last-child.bottom-message-container {
    padding-bottom: var(--bottom-message-padding, inherit) !important;
  }
  
  /* Cart progress bar linear progress bar bottom message top padding reduction */
  .cart-progress-bar .progress-bar-container[data-progress-style="linear"] .bottom-message-container {
    padding-top: calc(var(--bottom-message-padding-top, inherit) - 12px) !important;
  }
  
  /* Cart progress bar linear progress bar bottom message top padding reduction - alternative selector */
  .cart-progress-bar .progress-bar-container .bottom-message-container[data-linear-progress="true"] {
    padding-top: calc(var(--bottom-message-padding-top, inherit) - 12px) !important;
  }
  
  /* Cart progress bar linear progress bar bottom message top padding reduction - more specific targeting */
  .cart-progress-bar[data-progress-style="linear"] .bottom-message-container,
  .cart-progress-bar .progress-bar-container[data-progress-style="linear"] .bottom-message-container {
    padding-top: calc(var(--bottom-message-padding-top, inherit) - 12px) !important;
  }
  
  /* Cart progress bar CSS variable-based reduction for linear progress bars */
  .cart-progress-bar .progress-bar-container[data-progress-style="linear"] .bottom-message-container {
    --firefox-linear-padding-reduction: 12px;
    padding-top: calc(var(--bottom-message-padding-top, inherit) - var(--firefox-linear-padding-reduction, 12px)) !important;
  }
}