/* Qesora unified action system.
   Primary actions share the same blue dither surface as the billing switch;
   navigation, filters, accordions and compact utilities keep their hierarchy. */

:root {
  --qesora-action-blue: #1e3fe0;
  --qesora-action-shadow:
    0 0 0 1px rgba(30, 63, 224, .28),
    0 7px 18px -11px rgba(6, 20, 60, .86);
  --qesora-action-shadow-hover:
    0 0 0 1px rgba(30, 63, 224, .42),
    0 11px 24px -13px rgba(6, 20, 60, .92);
}

[data-qesora-button-style="primary"] {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 44px;
  border: 0 !important;
  border-radius: 5px !important;
  background-color: var(--qesora-action-blue) !important;
  background-image: var(--qesora-button-dither) !important;
  background-position: center !important;
  /* Fixed tile, not `cover`: with `cover` the texture was scaled to the element,
     so a wide button (a full-width submit) got a visibly coarser grain than a
     compact one. Repeating a fixed tile keeps the dither identical everywhere.
     165x44 reproduces the grain the compact buttons already had. */
  background-repeat: repeat !important;
  background-size: 165px 44px !important;
  color: #fff !important;
  font-family: "Geist Mono", ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: var(--qesora-action-shadow) !important;
  text-shadow: 0 1px 2px rgba(6, 20, 60, .58);
  transform: translateY(0) scale(1);
  transform-origin: center;
  cursor: pointer;
  transition-property: transform, filter, box-shadow, opacity;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

[data-qesora-button-style="primary"][data-qesora-button-added="true"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 12px 14px 12px 16px !important;
}

[data-qesora-button-style="primary"] > span {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

[data-qesora-button-style="primary"][data-qesora-button-segment="inactive"] {
  opacity: .56;
  filter: saturate(.74);
  box-shadow: 0 0 0 1px rgba(30, 63, 224, .16) !important;
}

@media (hover: hover) and (pointer: fine) {
  [data-qesora-button-style="primary"][data-qesora-button-segment="inactive"]:hover {
    opacity: .82;
    filter: saturate(.94) brightness(1.035);
  }
}

/* React surfaces already contain a canvas. Hiding it makes every action use
   the exact same texture without mutating React-owned children. */
[data-qesora-button-style="primary"] > canvas {
  opacity: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
  [data-qesora-button-style="primary"]:hover {
    filter: brightness(1.055);
    box-shadow: var(--qesora-action-shadow-hover) !important;
    transform: translateY(-1px) scale(1);
  }
}

[data-qesora-button-style="primary"]:active {
  filter: brightness(.985);
  transform: translateY(0) scale(.96);
  transition-duration: 80ms;
}

[data-qesora-button-style="primary"]:focus-visible {
  outline: 2px solid #1e3fe0 !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 3px #f6f6f3,
    var(--qesora-action-shadow-hover) !important;
}

[data-qesora-button-style="secondary"] {
  min-height: 44px;
  border: 0 !important;
  border-radius: 5px !important;
  background: rgba(246, 246, 243, .94) !important;
  color: #17181a !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .09),
    0 1px 2px -1px rgba(0, 0, 0, .06),
    0 2px 4px rgba(0, 0, 0, .035) !important;
  transform: scale(1);
  transition-property: transform, background-color, box-shadow;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}

[data-qesora-button-style="secondary"]:active {
  transform: scale(.96);
  transition-duration: 80ms;
}

@media (hover: hover) and (pointer: fine) {
  [data-qesora-button-style="secondary"]:hover {
    background: #fff !important;
    box-shadow:
      0 0 0 1px rgba(30, 63, 224, .24),
      0 5px 14px -10px rgba(6, 20, 60, .58) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-qesora-button-style] {
    transition-duration: 0.01ms !important;
  }
}