/* 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;
}
/* ── 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;
}