/* Essential Urgency Message Styles */
.urgency-message {
  margin: 0 !important;  /* Keep margin controlled by wrapper */
  padding: 8px 16px !important;  /* Reduced from 12px to 8px but kept reasonable padding */
  border-radius: 4px !important;
  transition: all 0.3s ease;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  z-index: 100 !important;
  line-height: 1.4 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  visibility: visible !important;
}

.urgency-message-stacked {
  display: block !important;
}

.urgency-message-main-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}

.urgency-message-icon {
  flex-shrink: 0;
  line-height: 1;
  margin-top: 0;
}

.urgency-message-main-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.urgency-message-main-text {
  line-height: 1.35;
  width: 100%;
}

.urgency-message-subheading {
  font-size: 0.9em;
  line-height: 1.35;
  opacity: 0.78;
  font-weight: 400;
  width: 100%;
}

.urgency-message-progress {
  margin-top: 10px;
  width: 100%;
  align-self: stretch;
}

.urgency-message-progress-track {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(145, 158, 171, 0.24);
  box-sizing: border-box;
  overflow: hidden;
}

.urgency-message-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.2s ease;
}

.urgency-message.urgency-template-warm {
  border-radius: 999px !important;
}

/* Special overrides for left alignment */
.urgency-message.urgency-template-classic[style*="text-align: left"] {
  margin-left: 0 !important;
  padding-left: 0 !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.urgency-message.urgency-template-classic[style*="text-align: center"] {
  justify-content: center !important;
  text-align: center !important;
}

.urgency-message.urgency-template-classic[style*="text-align: right"] {
  justify-content: flex-end !important;
  text-align: right !important;
}

/* For left alignment with no icon, remove all left padding */
.urgency-message.urgency-template-classic[style*="text-align: left"]:not(:has(.urgency-message-icon)):not(:has(span)) {
  padding-left: 0 !important;
}

/* Add a small padding for left-aligned messages WITH animations to ensure animation looks proper */
.urgency-message.urgency-template-classic[style*="text-align: left"].pulse,
.urgency-message.urgency-template-classic[style*="text-align: left"].bounce,
.urgency-message.urgency-template-classic[style*="text-align: left"].shake,
.urgency-message.urgency-template-classic[style*="text-align: left"].slide,
.urgency-message.urgency-template-classic[style*="text-align: left"].flip,
.urgency-message.urgency-template-classic[style*="text-align: left"].wave,
.urgency-message.urgency-template-classic[style*="text-align: left"].glow,
.urgency-message.urgency-template-classic[style*="text-align: left"].highlight,
.urgency-message.urgency-template-classic[style*="text-align: left"].fade {
  padding-left: 4px !important;
}

/* Ensure the message container properly aligns its content for left alignment */
.urgency-message-positioned[style*="padding-left: 0"] .urgency-message {
  padding-left: 0 !important;
}

/* Position the message in a good location - Remove conflicting margins */
form[action*="/cart/add"] .urgency-message,
form[action*="/cart/add"] + .urgency-message,
.product-form .urgency-message,
.product-form + .urgency-message,
.product__info-container .urgency-message {
  margin: 0;  /* Remove redundant margins */
}

/* Add the message to common product form locations */
#urgency-message-container,
#urgency-message-positioned .urgency-message {
  order: 10; /* Position after price but before add to cart */
}

/* Ensure the message container is visible */
.urgency-message-positioned {
  display: block !important;
  width: 100% !important;
  margin: 10px 0 !important;  /* Restored to 10px for good spacing */
  padding: 0 !important;
  clear: both !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-align: inherit;
}

/* Default color styles for different message types - These can be overridden by JS */
.urgency-message.urgency-template-classic.urgency-message-zero:not([style*="color"]) {
  color: #e4202a;
  background-color: rgba(228, 32, 42, 0.1);
  border: 1px solid rgba(228, 32, 42, 0.3);
}

.urgency-message.urgency-template-classic.urgency-message-one:not([style*="color"]) {
  color: #e4202a;
  background-color: rgba(228, 32, 42, 0.1);
  border: 1px solid rgba(228, 32, 42, 0.3);
}

.urgency-message.urgency-template-classic.urgency-message-low:not([style*="color"]) {
  color: #ff6600;
  background-color: rgba(255, 102, 0, 0.1);
  border: 1px solid rgba(255, 102, 0, 0.3);
}

.urgency-message.urgency-template-classic.urgency-message-high:not([style*="color"]) {
  color: #2f7f2f;
  background-color: rgba(47, 127, 47, 0.1);
  border: 1px solid rgba(47, 127, 47, 0.3);
}

/* Only show default icon if custom icon is not present AND not left-aligned without icon */
.urgency-message.urgency-template-classic:not(:has(.urgency-message-icon)):not([style*="text-align: left"])::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 10px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  flex-shrink: 0 !important;
}

/* For left-aligned messages, make the auto-icon smaller if it appears */
.urgency-message.urgency-template-classic[style*="text-align: left"]:not(:has(.urgency-message-icon))::before {
  width: 14px !important;
  margin-left: 0 !important;
  margin-right: 6px !important;
}

.urgency-message.urgency-template-classic.urgency-message-zero:not(:has(.urgency-message-icon))::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e4202a"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"/></svg>') !important;
}

.urgency-message.urgency-template-classic.urgency-message-one:not(:has(.urgency-message-icon))::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e4202a"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>') !important;
}

.urgency-message.urgency-template-classic.urgency-message-low:not(:has(.urgency-message-icon))::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff6600"><path d="M12 8V4l8 8-8 8v-4H4V8z"/></svg>') !important;
}

.urgency-message.urgency-template-classic.urgency-message-high:not(:has(.urgency-message-icon))::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232f7f2f"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') !important;
}

/* Animation classes */
.pulse {
  animation: pulse 1.5s infinite ease-in-out !important;
}

.bounce {
  animation: bounce 1s infinite !important;
}

.fade {
  animation: fade 1.5s infinite !important;
}

.shake {
  animation: shake 0.5s infinite !important;
}

.slide {
  animation: slide 1s ease-in-out !important;
}

.highlight {
  animation: highlight 2s infinite !important;
}

.glow {
  animation: glow 1.5s infinite alternate !important;
}

.flip {
  animation: flip 2s infinite !important;
}

.wave {
  animation: wave 1.5s infinite !important;
}

/* Animation keyframes */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

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

@keyframes fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

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

@keyframes slide {
  0% { transform: translateX(-10px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes highlight {
  0%, 100% { background-color: inherit; }
  50% { background-color: rgba(255, 255, 0, 0.3); }
}

@keyframes glow {
  0% { box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); }
  100% { box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }
}

@keyframes flip {
  0% { transform: perspective(400px) rotateY(0); }
  100% { transform: perspective(400px) rotateY(360deg); }
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-5px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(5px); }
}

/* Automatically inject the message after price, before add to cart */
.product__info-container:not([data-urgency-added]) #urgency-message-container,
form[action*="/cart/add"]:not([data-urgency-added]) #urgency-message-container,
.product-form:not([data-urgency-added]) #urgency-message-container {
  display: none !important; /* Hide the original container */
}

/* Remove duplicate margin rule that conflicts with above */

/* Utility classes for minimal spacing - keep it simple */
.urgency-message-positioned.minimal-spacing {
  margin: 6px 0 !important;  /* Slightly tighter spacing for button containers */
}