/*
 * Global Digitnet commerce feedback.
 * Small, future-safe visual states for add-to-cart buttons and image loading.
 */

.add_to_cart_button.dn-is-adding,
.add_to_cart_button.loading,
.single_add_to_cart_button.dn-is-adding,
.dn-wc-add-to-cart.dn-is-adding,
.dn-sp-cart.dn-is-adding,
[data-dn-add-to-cart].dn-is-adding,
[data-action="add-to-cart"].dn-is-adding,
.dn-cart-bubble.dn-is-adding,
.dn-recent-cart.dn-is-adding,
.dn-accessory-add.dn-is-adding,
.dn-managed-cart.dn-is-adding,
.dn-rel-add.dn-is-adding,
.dn-full-cart-btn.dn-is-adding,
.dn-feature-add.dn-is-adding {
  opacity: .78;
  cursor: wait !important;
  pointer-events: none;
}

.add_to_cart_button.dn-is-added,
.single_add_to_cart_button.dn-is-added,
.dn-wc-add-to-cart.dn-is-added,
.dn-sp-cart.dn-is-added,
[data-dn-add-to-cart].dn-is-added,
[data-action="add-to-cart"].dn-is-added,
.dn-cart-bubble.dn-is-added,
.dn-recent-cart.dn-is-added,
.dn-accessory-add.dn-is-added,
.dn-managed-cart.dn-is-added,
.dn-rel-add.dn-is-added,
.dn-full-cart-btn.dn-is-added,
.dn-feature-add.dn-is-added {
  border-color: rgba(15, 122, 79, .48) !important;
  color: #0f7a4f !important;
}

.dn-icon-cart-btn,
.dn-cart-bubble,
.dn-recent-cart,
.dn-managed-cart,
.dn-rel-add,
  .dn-full-cart-btn,
  .dn-feature-add {
  position: relative;
}

.dn-cart-feedback-label {
  display: none;
}

.dn-icon-cart-btn .dn-cart-feedback-label,
.dn-cart-bubble .dn-cart-feedback-label,
.dn-recent-cart .dn-cart-feedback-label,
.dn-managed-cart .dn-cart-feedback-label,
.dn-rel-add .dn-cart-feedback-label,
  .dn-full-cart-btn .dn-cart-feedback-label,
  .dn-feature-add .dn-cart-feedback-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  z-index: 20;
  min-width: 72px;
  max-width: 118px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #071b36;
  color: #fff !important;
  font-size: 11px;
  line-height: 1.15;
  font-weight: 900;
  text-align: center;
  transform: translateX(-50%);
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(7, 27, 54, .18);
  pointer-events: none;
}

.dn-icon-cart-btn.dn-is-adding .dn-cart-feedback-label,
.dn-icon-cart-btn.dn-is-added .dn-cart-feedback-label,
.dn-cart-bubble.dn-is-adding .dn-cart-feedback-label,
.dn-cart-bubble.dn-is-added .dn-cart-feedback-label,
.dn-recent-cart.dn-is-adding .dn-cart-feedback-label,
.dn-recent-cart.dn-is-added .dn-cart-feedback-label,
.dn-managed-cart.dn-is-adding .dn-cart-feedback-label,
.dn-managed-cart.dn-is-added .dn-cart-feedback-label,
.dn-rel-add.dn-is-adding .dn-cart-feedback-label,
.dn-rel-add.dn-is-added .dn-cart-feedback-label,
.dn-full-cart-btn.dn-is-adding .dn-cart-feedback-label,
.dn-full-cart-btn.dn-is-added .dn-cart-feedback-label,
.dn-feature-add.dn-is-adding .dn-cart-feedback-label,
.dn-feature-add.dn-is-added .dn-cart-feedback-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dn-icon-cart-btn.dn-is-added .dn-cart-feedback-label,
.dn-cart-bubble.dn-is-added .dn-cart-feedback-label,
.dn-recent-cart.dn-is-added .dn-cart-feedback-label,
.dn-managed-cart.dn-is-added .dn-cart-feedback-label,
.dn-rel-add.dn-is-added .dn-cart-feedback-label,
.dn-full-cart-btn.dn-is-added .dn-cart-feedback-label,
.dn-feature-add.dn-is-added .dn-cart-feedback-label {
  background: #0f7a4f;
}

img[data-dn-img-loading="1"] {
  background-color: #f3f6fa;
}

@media (prefers-reduced-motion: no-preference) {
  .add_to_cart_button,
  .single_add_to_cart_button,
  .dn-wc-add-to-cart,
  .dn-sp-cart,
  [data-dn-add-to-cart],
  [data-action="add-to-cart"],
  .dn-cart-bubble,
  .dn-recent-cart,
  .dn-accessory-add,
  .dn-managed-cart,
  .dn-rel-add,
  .dn-full-cart-btn,
  .dn-feature-add {
    transition: opacity .18s ease, color .18s ease, border-color .18s ease, background .18s ease;
  }
}

@media (max-width: 640px) {
  .dn-icon-cart-btn .dn-cart-feedback-label,
  .dn-cart-bubble .dn-cart-feedback-label,
  .dn-recent-cart .dn-cart-feedback-label,
  .dn-managed-cart .dn-cart-feedback-label,
  .dn-rel-add .dn-cart-feedback-label,
  .dn-full-cart-btn .dn-cart-feedback-label,
  .dn-feature-add .dn-cart-feedback-label {
    min-width: 64px;
    font-size: 10px;
  }
}