/* ==========================================================================
   03-BUTTONS.CSS — Al Aliyah Supermarket implementation kit
   Status: PENDING REVIEW.

   Variants: primary, secondary, tertiary, ghost, destructive.
   Sizes: sm, md, lg.
   States covered on every variant: default, :hover, :focus-visible,
   :active, :disabled, [aria-busy="true"] (loading).
   ========================================================================== */

.aly-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans); /* never the display serif on a button, see 02-typography.css */
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid transparent;
  min-block-size: var(--touch-target-min); /* 44px hard rule, all sizes */
  padding-inline: var(--space-5);
  padding-block: var(--space-2);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}

.aly-btn:active {
  transform: translateY(1px);
}

.aly-btn:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
  /* layer the owner's soft coral glow underneath the solid outline — see
     --focus-ring-tint's comment in 00-tokens.css for why it's not alone */
  box-shadow: 0 0 0 6px var(--focus-ring-tint);
}

.aly-btn:disabled,
.aly-btn[aria-disabled="true"] {
  cursor: not-allowed;
  background-color: var(--btn-disabled-bg);
  color: var(--btn-disabled-label);
  border-color: transparent;
}

/* Loading state: aria-busy keeps the button in the tab order and announced
   as busy, rather than removing it (removing a control mid-interaction
   causes focus loss). The label is visually dimmed and a spinner appears
   in its place via ::after; the label text itself is not removed from the
   DOM so screen readers still have something to reference alongside
   aria-busy. */
.aly-btn[aria-busy="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.aly-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: 1.1em;
  block-size: 1.1em;
  margin-inline-start: -0.55em;
  margin-block-start: -0.55em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  animation: aly-spin var(--duration-slow) linear infinite;
  color: var(--btn-primary-label);
}

.aly-btn--secondary[aria-busy="true"]::after,
.aly-btn--destructive[aria-busy="true"]::after {
  color: #FFFFFF;
}

.aly-btn--tertiary[aria-busy="true"]::after,
.aly-btn--ghost[aria-busy="true"]::after {
  color: var(--ink-900);
}

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

@media (prefers-reduced-motion: reduce) {
  .aly-btn[aria-busy="true"]::after {
    animation: none;
  }
}

/* ---- Sizes ---- */
.aly-btn--sm {
  min-block-size: max(var(--touch-target-min), 36px);
  padding-inline: var(--space-4);
  padding-block: var(--space-1);
  font-size: var(--fs-sm);
}

.aly-btn--md {
  font-size: var(--fs-base);
}

.aly-btn--lg {
  padding-inline: var(--space-6);
  padding-block: var(--space-3);
  font-size: var(--fs-md);
}

/* ---- Variant: Primary — gold fill, near-black ink label (rule 2) ---- */
.aly-btn--primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-label);
  box-shadow: var(--shadow-sm);
}

.aly-btn--primary:hover:not(:disabled) {
  background-color: var(--btn-primary-bg-hover);
}

.aly-btn--primary:active:not(:disabled) {
  background-color: var(--btn-primary-bg-active);
}

/* ---- Variant: Secondary — success-deep fill, white label ---- */
.aly-btn--secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-label);
}

.aly-btn--secondary:hover:not(:disabled) {
  background-color: var(--btn-secondary-bg-hover);
}

/* ---- Variant: Tertiary — outlined, ink label ---- */
.aly-btn--tertiary {
  background-color: transparent;
  border-color: var(--btn-tertiary-border);
  color: var(--btn-tertiary-label);
}

.aly-btn--tertiary:hover:not(:disabled) {
  background-color: var(--color-surface-sunk);
}

/* ---- Variant: Ghost — no border/fill, gold-700/800 label per ground rule ---- */
.aly-btn--ghost {
  background-color: transparent;
  color: var(--btn-ghost-label);
}

.aly-btn--ghost:hover:not(:disabled) {
  background-color: var(--color-surface-sunk);
  text-decoration: underline;
}

/* ---- Variant: Destructive — error-strong fill, white label ---- */
.aly-btn--destructive {
  background-color: var(--btn-destructive-bg);
  color: var(--btn-destructive-label);
}

.aly-btn--destructive:hover:not(:disabled) {
  background-color: var(--btn-destructive-bg-hover);
}

/* ---- Icon-only button ----
   Owner spec fixes the VISUAL box at 36px (--icon-button-size). The hard
   accessibility rule in this kit requires a >=44px HIT target. Both are
   satisfied at once: the visible circle stays 36px, and an invisible
   ::before expands the actual clickable/tappable area to 44px using
   negative inset, so the button looks exactly as dense as specified while
   still passing WCAG 2.5.5/2.5.8 target-size guidance. */
.aly-btn--icon {
  position: relative;
  inline-size: var(--icon-button-size);
  block-size: var(--icon-button-size);
  min-block-size: 0; /* override the 44px min-block-size on the VISUAL box itself */
  padding: 0;
  border-radius: var(--radius-circle);
}

.aly-btn--icon::before {
  content: "";
  position: absolute;
  inset: calc((var(--icon-button-size) - var(--touch-target-min)) / 2);
}

.aly-btn--icon svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

/* --------------------------------------------------------------------------
   Quantity stepper (buttons + numeric readout) — full component lives in
   05-product-card.css for layout; the +/- buttons reuse .aly-btn--icon.
   -------------------------------------------------------------------------- */
.aly-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-1);
  background: var(--color-surface);
}

.aly-stepper__input {
  inline-size: 2.5ch;
  text-align: center;
  border: 0;
  background: transparent;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.aly-stepper__input:focus-visible {
  outline: 2px solid var(--color-focus-outline);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.aly-stepper button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Three-state add-to-cart control: add -> adding -> in-cart (stepper)
   -------------------------------------------------------------------------- */
.aly-add-to-cart {
  display: grid;
}

.aly-add-to-cart__state {
  grid-area: 1 / 1;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.aly-add-to-cart[data-state="idle"] .aly-add-to-cart__state--adding,
.aly-add-to-cart[data-state="idle"] .aly-add-to-cart__state--in-cart,
.aly-add-to-cart[data-state="adding"] .aly-add-to-cart__state--idle,
.aly-add-to-cart[data-state="adding"] .aly-add-to-cart__state--in-cart,
.aly-add-to-cart[data-state="in-cart"] .aly-add-to-cart__state--idle,
.aly-add-to-cart[data-state="in-cart"] .aly-add-to-cart__state--adding {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Buttons that are links. The Elementor kit's `.elementor-kit-4271 a` / `a:hover` (0-1-1) link
   colour outranked every variant's label (0-1-0), so a linked button read gold-800 on its own
   fill: "Shop groceries" on gold and "How points work" on the night hero were barely legible. */
.elementor-kit-4271 a.aly-btn--primary, .elementor-kit-4271 a.aly-btn--primary:hover { color: var(--btn-primary-label); }
.elementor-kit-4271 a.aly-btn--secondary, .elementor-kit-4271 a.aly-btn--secondary:hover { color: var(--btn-secondary-label); }
.elementor-kit-4271 a.aly-btn--tertiary, .elementor-kit-4271 a.aly-btn--tertiary:hover { color: var(--btn-tertiary-label); }
.elementor-kit-4271 a.aly-btn--ghost, .elementor-kit-4271 a.aly-btn--ghost:hover { color: var(--btn-ghost-label); }
.elementor-kit-4271 a.aly-btn--destructive, .elementor-kit-4271 a.aly-btn--destructive:hover { color: var(--btn-destructive-label); }
.elementor-kit-4271 a.aly-hero__ghost, .elementor-kit-4271 a.aly-hero__ghost:hover { color: var(--cream-50); }