/* Shared base for every Pay page: the theme, the reset, the page shell and card, the division header,
   the primary button and the state blocks. Everything specific to one page or component lives in that
   component's own .razor.less, which CloudMate compiles next to it into an isolated .razor.css. */
:where(:root) {
  --angrymonkey-pay-primary: var(--amc-color-primary);
  --angrymonkey-pay-text: var(--amc-color-text);
  --angrymonkey-pay-muted: var(--amc-color-muted);
  --angrymonkey-pay-border: var(--amc-color-border);
  --angrymonkey-pay-background: var(--amc-color-background);
  --angrymonkey-pay-surface: var(--amc-color-surface);
  --accent: var(--angrymonkey-pay-primary);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--angrymonkey-pay-background);
  color: var(--angrymonkey-pay-text);
  line-height: 1.5;
}
button,
input,
select {
  font: inherit;
}
a,
button,
input,
select,
summary {
  touch-action: manipulation;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.pay-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}
.pay-card {
  background: var(--angrymonkey-pay-surface);
  border: 1px solid var(--angrymonkey-pay-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgb(17 24 650);
}
/* ── Division header: the originating division, prominently, as part of Angry Monkey ── */
.division-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.75rem;
  border-bottom: 4px solid var(--accent);
}
.division-logo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.division-monogram {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--accent);
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.division-header h1 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
}
.division-of {
  margin: 0.15rem 0 0;
  color: var(--angrymonkey-pay-muted);
  font-size: 0.9rem;
}
.method-action {
  min-height: 44px;
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.65rem 1.3rem;
  border: none;
  border-radius: 10px;
  background: var(--method-accent, var(--accent));
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 160ms ease;
}
.method-action:hover:not(:disabled) {
  filter: brightness(0.92);
}
.method-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.method-hint {
  margin: 0.6rem 0 0;
  color: var(--angrymonkey-pay-muted);
  font-size: 0.85rem;
}
/* ── States ── */
.pay-empty,
.pay-settled,
.pay-error {
  padding: 1.75rem;
}
.pay-empty h2,
.pay-settled h2,
.pay-error h2 {
  margin-top: 0;
  font-size: 1.15rem;
}
.pay-settled h2 {
  color: #14532d;
}
.pay-error h2 {
  color: #7f1d1d;
}