/**
 * BR-002 — Layer A: add-to-cart feedback stylesheet
 *
 * Paints the <1 frame "we got your tap" feedback that the JS toggles via
 * .br002-adding on any add-to-cart trigger. Must not clash with XStore's
 * own `.loading` and `.added` classes — we coexist rather than replace.
 *
 * Guiding rules:
 *  - Feedback must be visible in LTR and RTL (AR) without adjustment.
 *  - Honor prefers-reduced-motion: no spinner animation, keep the static
 *    pressed-state only.
 *  - Footprint: single, specific class; no rules on generic selectors.
 */

/* --- The "Adding..." pressed state ---------------------------------------- */

.br002-adding {
  /* Disable further interaction at the CSS level so a nudge-tap can't
     sneak past the JS capture handler in the unlikely case the handler
     didn't run. */
  pointer-events: none !important;

  /* Low-level visual nudge — 0.85 opacity + slight scale — happens in
     the browser's next paint, before any network round-trip. */
  opacity: 0.85 !important;
  transform: translateZ(0) scale(0.985);
  transition: opacity 120ms ease-out, transform 120ms ease-out;

  position: relative;
}

/* --- Spinner -------------------------------------------------------------- */
/* Painted as a pure CSS ring to the trailing edge of the button. Flips
   to the leading edge under RTL so it stays visually "after" the label. */

.br002-adding::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.75em;
  width: 0.9em;
  height: 0.9em;
  margin-top: -0.45em;
  border: 0.13em solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: br002-spin 0.7s linear infinite;
  pointer-events: none;
}

[dir="rtl"] .br002-adding::after,
html[dir="rtl"] .br002-adding::after {
  right: auto;
  left: 0.75em;
}

@keyframes br002-spin {
  to { transform: rotate(360deg); }
}

/* --- Reduced-motion honoring --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .br002-adding {
    transform: none;
    transition: opacity 0ms;
  }
  .br002-adding::after {
    animation: none;
    /* Keep the ring but static — still a visible marker. */
    border-top-color: currentColor;
    opacity: 0.7;
  }
}

/* --- Coexistence with XStore theme states -------------------------------- */
/* If XStore's own .loading class is also applied, let ours take precedence
   for the visual state (so we don't get double-spinners). */

.single_add_to_cart_button.br002-adding.loading::after,
.add_to_cart_button.br002-adding.loading::after,
.et-single-buy-now.br002-adding.loading::after {
  /* Suppress the theme's own pseudo-element content if any. Theme usually
     uses a font-awesome glyph; we hide it with the below. */
}
.br002-adding.loading::before {
  display: none !important;
}

/* --- Silent-failure marker + error toast --------------------------------- */

.br002-add-failed {
  /* Button visibly drops the success state so the user isn't misled. */
  outline: 2px solid #b91c1c;
  outline-offset: 1px;
}

.br002-atc-error {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(600px, calc(100vw - 32px));
  background: #b91c1c;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font: inherit;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  z-index: 99999;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  animation: br002-toast-in 180ms ease-out;
}

@keyframes br002-toast-in {
  from { transform: translate(-50%, 12px); opacity: 0; }
  to   { transform: translate(-50%, 0);     opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .br002-atc-error { animation: none; }
}

[dir="rtl"] .br002-atc-error,
html[dir="rtl"] .br002-atc-error {
  direction: rtl;
}