/*
 * Tamanhos no cartão.
 *
 * O plugin traz o layout; o tema ajusta pelas variáveis abaixo. O padrão lê os tokens do tema de blocos
 * (Vitrine: contrast, base, border, muted; raios custom.radius.*) e cai em neutros sem eles.
 * Seletores de uma classe: perdem para qualquer regra do tema com uma classe a mais.
 */
.rx-quick-buy {
  --rx-quick-size-size: 34px;
  --rx-quick-size-border: var(--wp--preset--color--border, #d9d9d9);
  --rx-quick-size-text: var(--wp--preset--color--contrast, #111);
  --rx-quick-size-bg: transparent;
  --rx-quick-size-active-border: var(--wp--preset--color--contrast, #111);
  --rx-quick-size-active-bg: var(--wp--preset--color--contrast, #111);
  --rx-quick-size-active-text: var(--wp--preset--color--base, #fff);
  --rx-quick-size-disabled: var(--wp--preset--color--muted, #9a9a9a);
  --rx-quick-size-radius: var(--wp--custom--radius--sm, 4px);
  --rx-quick-button-bg: var(--wp--preset--color--contrast, #111);
  --rx-quick-button-text: var(--wp--preset--color--base, #fff);
  --rx-quick-button-border: var(--rx-quick-button-bg);
  --rx-quick-button-radius: var(--wp--custom--radius--sm, 4px);
  --rx-quick-font-size: var(--wp--preset--font-size--small, 0.8125rem);
  --rx-quick-gap: 8px;

  display: flex;
  flex-direction: column;
  gap: var(--rx-quick-gap);
  width: 100%;
}

.rx-quick-buy__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rx-quick-buy__size {
  position: relative;
  min-width: var(--rx-quick-size-size);
  height: var(--rx-quick-size-size);
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--rx-quick-size-border);
  border-radius: var(--rx-quick-size-radius);
  background: var(--rx-quick-size-bg);
  color: var(--rx-quick-size-text);
  font: inherit;
  font-size: var(--rx-quick-font-size);
  line-height: 1;
  cursor: pointer;
}

.rx-quick-buy__size:hover:not([disabled]) {
  border-color: var(--rx-quick-size-active-border);
}

.rx-quick-buy__size[aria-checked="true"] {
  border-color: var(--rx-quick-size-active-border);
  background: var(--rx-quick-size-active-bg);
  color: var(--rx-quick-size-active-text);
}

/* Esgotado: riscado na diagonal, como uma etiqueta cortada. */
.rx-quick-buy__size[disabled] {
  color: var(--rx-quick-size-disabled);
  cursor: not-allowed;
  background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--rx-quick-size-disabled) calc(50% - 0.5px), var(--rx-quick-size-disabled) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

.rx-quick-buy__size:focus-visible,
.rx-quick-buy__button:focus-visible {
  outline: 2px solid var(--rx-quick-size-active-border);
  outline-offset: 2px;
}

.rx-quick-buy__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--rx-quick-button-border);
  border-radius: var(--rx-quick-button-radius);
  background: var(--rx-quick-button-bg);
  color: var(--rx-quick-button-text);
  font: inherit;
  font-size: var(--rx-quick-font-size);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.rx-quick-buy__button[disabled] {
  opacity: 0.55;
  cursor: default;
}

.rx-quick-buy.is-loading .rx-quick-buy__button {
  opacity: 0.7;
  cursor: progress;
}

.rx-quick-buy__status {
  font-size: var(--rx-quick-font-size);
}

.rx-quick-buy__status:empty {
  display: none;
}

/* O aviso de sucesso aparece só no botão e some; o status fica para leitor de tela. À vista, só o erro. */
.rx-quick-buy:not(.is-error) .rx-quick-buy__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.rx-quick-buy__preview {
  max-width: 220px;
}

@media (prefers-reduced-motion: no-preference) {
  .rx-quick-buy__size,
  .rx-quick-buy__button {
    transition:
      background-color var(--wp--custom--motion--duration--fast, 0.15s) ease-out,
      border-color var(--wp--custom--motion--duration--fast, 0.15s) ease-out,
      color var(--wp--custom--motion--duration--fast, 0.15s) ease-out,
      opacity var(--wp--custom--motion--duration--fast, 0.15s) ease-out,
      transform var(--wp--custom--motion--duration--fast, 0.15s) ease-out;
  }

  .rx-quick-buy__size:active:not([disabled]),
  .rx-quick-buy__button:active:not([disabled]) {
    transform: scale(0.96);
  }

  .rx-quick-buy.is-added .rx-quick-buy__button {
    animation: rx-quick-buy-added var(--wp--custom--motion--duration--slow, 0.4s) ease-out;
  }
}

@keyframes rx-quick-buy-added {
  40% {
    transform: scale(1.04);
  }
}