:where(body.woocommerce-checkout, body.woocommerce-order-received, .woocommerce-checkout, .woocommerce-order) {
  --apc-cf-text: var(--text-high, #18132a);
  --apc-cf-mid: var(--text-mid, #443b5a);
  --apc-cf-accent: var(--ctl-c2, #2d9cff);
  --apc-cf-accent-strong: var(--ctl-c1, #d946ef);
  --apc-cf-surface: var(--surface-1, #fbf8ff);
  --apc-cf-line: var(--border, #dfd5a4);
}

.apc-checkout-feedback {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: calc(100% - 32px);
  max-width: 1100px;
  margin: 0 0 clamp(12px, 1.8vw, 20px);
  margin-inline: auto;
  padding: clamp(14px, 2vw, 20px);
  box-sizing: border-box;
  color: var(--apc-cf-text);
  border: 1px solid color-mix(in oklch, var(--apc-cf-line) 90%, transparent);
  border-left: 4px solid var(--apc-cf-accent);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--apc-cf-accent) 9%, transparent), transparent 48%),
    color-mix(in oklch, var(--apc-cf-surface) 94%, white);
  box-shadow: 0 10px 24px color-mix(in oklch, var(--apc-cf-text) 8%, transparent);
}

/* Bricks' checkout section rules can promote direct form children to the
   full shell width. Keep the feedback layer aligned to the checkout content
   column instead of allowing that generic width rule to win. */
form.checkout > .apc-checkout-feedback {
  width: min(1100px, calc(100% - 32px)) !important;
  max-width: 1100px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.apc-checkout-feedback + .bc-checkout-grid {
  width: 100%;
}

body.woocommerce-cart .apc-checkout-feedback {
  width: min(1100px, calc(100% - 32px));
  max-width: 1100px;
  margin: 16px auto;
}

[data-bs-items] .apc-checkout-items {
  display: grid;
  gap: 7px;
  margin: 0 0 12px;
}

[data-bs-items] .apc-checkout-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--apc-cf-line) 68%, transparent);
  color: var(--apc-cf-text);
}

[data-bs-items] .apc-checkout-item__image {
  width: 34px;
  height: 34px;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--apc-cf-line);
  background: color-mix(in oklch, var(--apc-cf-surface) 88%, var(--apc-cf-accent));
}

[data-bs-items] .apc-checkout-item__image--category_svg {
  object-fit: contain;
  padding: 6px;
}

[data-bs-items] .apc-checkout-item__image--empty {
  opacity: .35;
}

[data-bs-items] .apc-checkout-item__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

[data-bs-items] .apc-checkout-item__copy strong {
  overflow: hidden;
  font-size: .82rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-bs-items] .apc-checkout-item__copy span {
  color: var(--apc-cf-mid);
  font-size: .72rem;
}

[data-bs-items] .apc-checkout-item__total {
  color: var(--apc-cf-text);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}

.bs-shiponly[hidden],
[data-bs-shipping][hidden] {
  display: none !important;
}

.apc-checkout-feedback__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px 18px;
}

.apc-checkout-feedback__eyebrow {
  color: var(--apc-cf-accent-strong);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  line-height: 1.1;
  text-transform: uppercase;
}

.apc-checkout-feedback__title {
  margin: 3px 0 0;
  color: var(--apc-cf-text);
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.12;
}

.apc-checkout-feedback__detail,
.apc-checkout-feedback__context {
  margin: 4px 0 0;
  color: var(--apc-cf-mid);
  font-size: .9rem;
  line-height: 1.35;
}

.apc-checkout-feedback__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 6px 10px;
  color: var(--apc-cf-text);
  border: 1px solid color-mix(in oklch, var(--apc-cf-accent) 42%, var(--apc-cf-line));
  border-radius: 999px;
  background: color-mix(in oklch, var(--apc-cf-accent) 11%, transparent);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.apc-checkout-feedback__stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.apc-checkout-feedback__stages li {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  padding: 8px 10px;
  color: var(--apc-cf-mid);
  border: 1px solid color-mix(in oklch, var(--apc-cf-line) 68%, transparent);
  border-radius: 10px;
  background: color-mix(in oklch, var(--apc-cf-surface) 72%, transparent);
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.15;
}

.apc-checkout-feedback__stages li.is-active {
  color: var(--apc-cf-text);
  border-color: color-mix(in oklch, var(--apc-cf-accent) 62%, var(--apc-cf-line));
  background: color-mix(in oklch, var(--apc-cf-accent) 12%, var(--apc-cf-surface));
}

.apc-checkout-feedback__stages li.is-complete {
  color: var(--apc-cf-text);
  border-color: color-mix(in oklch, var(--apc-cf-accent-strong) 40%, var(--apc-cf-line));
}

.apc-checkout-feedback__stage-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--apc-cf-text);
  border: 1px solid color-mix(in oklch, var(--apc-cf-accent) 52%, var(--apc-cf-line));
  border-radius: 50%;
  background: color-mix(in oklch, var(--apc-cf-accent) 13%, transparent);
  font-size: .7rem;
  font-weight: 850;
}

.apc-checkout-feedback.is-processing .apc-checkout-feedback__status::before {
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border: 2px solid color-mix(in oklch, var(--apc-cf-accent) 25%, transparent);
  border-top-color: var(--apc-cf-accent-strong);
  border-radius: 50%;
  animation: apcCheckoutFeedbackSpin .8s linear infinite;
  content: "";
}

.apc-checkout-feedback.is-success {
  border-left-color: #35b979;
}

.apc-checkout-feedback.is-error {
  border-left-color: #d99b17;
}

@keyframes apcCheckoutFeedbackSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .apc-checkout-feedback {
    width: calc(100% - 24px);
    gap: 11px;
    padding: 13px;
    border-radius: 12px;
  }

  form.checkout > .apc-checkout-feedback {
    width: calc(100% - 24px) !important;
  }

  .apc-checkout-feedback__header {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .apc-checkout-feedback__status {
    justify-self: start;
  }

  .apc-checkout-feedback__stages {
    gap: 6px;
  }

  .apc-checkout-feedback__stages li {
    align-items: flex-start;
    gap: 5px;
    min-height: 48px;
    padding: 7px;
    font-size: .7rem;
  }

  .apc-checkout-feedback__stage-mark {
    flex-basis: 19px;
    width: 19px;
    height: 19px;
  }

  body.woocommerce-cart .apc-checkout-feedback {
    width: calc(100% - 24px);
    margin: 12px auto;
  }

  [data-bs-items] .apc-checkout-item {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 7px;
  }

  [data-bs-items] .apc-checkout-item__image {
    width: 30px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apc-checkout-feedback.is-processing .apc-checkout-feedback__status::before {
    animation: none;
  }
}

/* Compact submit-state feedback. WooCommerce still blocks the checkout while
   the request is in flight, but the customer gets a visible, contextual
   status instead of an unexplained gray screen. */
.apc-checkout-submit-status {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 100001;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: min(720px, calc(100vw - 32px));
  min-height: 112px;
  padding: 22px 24px;
  box-sizing: border-box;
  color: var(--apc-cf-text);
  border: 1px solid color-mix(in oklch, var(--apc-cf-accent) 48%, var(--apc-cf-line));
  border-radius: 16px;
  background: color-mix(in oklch, var(--apc-cf-surface) 96%, white);
  box-shadow: 0 18px 42px color-mix(in oklch, var(--apc-cf-text) 22%, transparent);
  font-size: .9rem;
  line-height: 1.15;
  opacity: 1;
  transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
}

.apc-checkout-submit-status[hidden] {
  display: none !important;
}

.apc-checkout-submit-status.is-dismissing {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.96);
  pointer-events: none;
  visibility: hidden;
}

.apc-checkout-submit-status__mark {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid color-mix(in oklch, var(--apc-cf-accent) 28%, transparent);
  border-top-color: var(--apc-cf-accent-strong);
  border-radius: 50%;
}

.apc-checkout-submit-status[data-state="processing"] .apc-checkout-submit-status__mark,
.apc-checkout-submit-status[data-state="redirecting"] .apc-checkout-submit-status__mark {
  animation: apcCheckoutFeedbackSpin .8s linear infinite;
}

.apc-checkout-submit-status[data-state="success"] .apc-checkout-submit-status__mark {
  border-color: #35b979;
  background: #35b979;
}

.apc-checkout-submit-status[data-state="error"] .apc-checkout-submit-status__mark,
.apc-checkout-submit-status[data-state="cancelled"] .apc-checkout-submit-status__mark {
  border-color: #d99b17;
}

.apc-checkout-submit-status__copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.apc-checkout-submit-status__context {
  overflow: hidden;
  color: var(--apc-cf-accent-strong);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.apc-checkout-submit-status__copy strong {
  overflow: hidden;
  font-size: 1.02rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apc-checkout-submit-status__copy small {
  overflow: hidden;
  color: var(--apc-cf-mid);
  font-size: .78rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.apc-checkout-submit-status__stage {
  min-width: 44px;
  color: var(--apc-cf-mid);
  font-size: .78rem;
  font-weight: 850;
  text-align: right;
  white-space: nowrap;
}

body.apc-checkout-is-processing .blockUI.blockOverlay,
body.apc-checkout-is-processing .blockUI.blockMsg,
body.apc-checkout-is-processing .blockUI.blockElement {
  opacity: .2 !important;
}

body.apc-checkout-is-processing .blockUI.blockMsg {
  pointer-events: none !important;
}

.apc-checkout-submit-is-processing {
  cursor: wait !important;
}

@media (max-width: 640px) {
  .apc-checkout-submit-status {
    inset: 50% auto auto 50%;
    width: min(520px, calc(100vw - 24px));
    min-height: 108px;
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apc-checkout-submit-status {
    transition: none;
  }

  .apc-checkout-submit-status[data-state="processing"] .apc-checkout-submit-status__mark,
  .apc-checkout-submit-status[data-state="redirecting"] .apc-checkout-submit-status__mark {
    animation: none;
  }
}
