/*
 * soter.css — shared styles for the Ⓢ badge + pay button.
 *
 * Serve from any engine that includes the Jinja partials:
 *   <link rel="stylesheet" href="/static/soter.css">
 * Or copy into the engine's own static bundle. Scoped under .soter-* so
 * it won't collide with engine styles.
 *
 * The Ⓢ glyph (U+24C8) renders cleanly in every modern font; no webfont
 * needed. Custom S-with-double-strike ligature can be layered later by
 * adding @font-face here without touching the markup.
 */

:root {
  --soter-accent:    #b8860b;   /* dark goldenrod — covenant gold */
  --soter-accent-fg: #fff8e1;
  --soter-ink:       #1a1a1a;
  --soter-muted:     #6b6b6b;
  --soter-surface:   #ffffff;
  --soter-border:    #d9b75a;
  --soter-radius:    6px;
  --soter-font:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Badge ("Accepts Ⓢ") ----------------------------------- */

.soter-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--soter-font);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--soter-radius);
  border: 1px solid var(--soter-border);
  transition: background-color 0.15s ease, transform 0.05s ease;
  white-space: nowrap;
}
.soter-badge:hover  { transform: translateY(-1px); }
.soter-badge:active { transform: translateY(0); }

.soter-badge--sm { padding: 0.15em 0.55em; font-size: 0.78rem; }
.soter-badge--md { padding: 0.25em 0.7em;  font-size: 0.88rem; }
.soter-badge--lg { padding: 0.4em 0.95em;  font-size: 1.05rem; }

.soter-badge--subtle {
  background: var(--soter-surface);
  color: var(--soter-ink);
}
.soter-badge--subtle:hover { background: #fff8e1; }

.soter-badge--solid {
  background: var(--soter-accent);
  color: var(--soter-accent-fg);
  border-color: var(--soter-accent);
}
.soter-badge--solid:hover { filter: brightness(1.08); }

.soter-badge__glyph {
  font-weight: 700;
  font-size: 1.15em;
  line-height: 1;
}

/* ---------- Pay button ("Pay Ⓢ123.45") ---------------------------- */

.soter-pay-form { display: inline-block; margin: 0; }

.soter-pay {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--soter-font);
  font-weight: 600;
  cursor: pointer;
  background: var(--soter-accent);
  color: var(--soter-accent-fg);
  border: 1px solid var(--soter-accent);
  border-radius: var(--soter-radius);
  transition: filter 0.15s ease, transform 0.05s ease;
}
.soter-pay:hover           { filter: brightness(1.08); }
.soter-pay:active          { transform: translateY(1px); }
.soter-pay:focus-visible   { outline: 2px solid var(--soter-accent); outline-offset: 2px; }

.soter-pay--sm { padding: 0.35em 0.8em;  font-size: 0.85rem; }
.soter-pay--md { padding: 0.55em 1.15em; font-size: 1rem;    }
.soter-pay--lg { padding: 0.75em 1.5em;  font-size: 1.15rem; }

.soter-pay__glyph {
  font-weight: 700;
  font-size: 1.25em;
  line-height: 1;
}

.soter-pay--disabled,
.soter-pay[disabled] {
  cursor: not-allowed;
  background: #efe7c8;
  color: var(--soter-muted);
  border-color: #d6c98a;
  filter: none !important;
  flex-direction: column;
  gap: 0.15em;
  padding-top: 0.45em;
  padding-bottom: 0.45em;
}
.soter-pay__note {
  font-size: 0.7em;
  font-weight: 400;
  opacity: 0.85;
}