/* ==========================================================================
   billing public pay page

   Loaded on top of app.css by views/public/pay.ejs and views/public/result.ejs
   only. It shares the document palette (ink #1b2230, accent #274b8f, hairline
   borders, tabular figures) so a client who has the printed invoice in front of
   them recognises the page instantly.

   Design brief: small, calm, obviously legitimate. One card, one action, no
   marketing, no navigation, nothing decorative and no glow anywhere. This is
   the only surface a client ever sees, so it has to look like a bank screen and
   not like a form.

   Every rule here is namespaced under .pay so it can never reach the admin.
   The fallbacks in each var() keep the page correct even if this file is ever
   loaded on its own.
   ========================================================================== */

.pay {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 8px 0 0;
}

/* --------------------------------------------------------------------------
   Brand line above the card
   -------------------------------------------------------------------------- */

.pay__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0 2px;
}

.pay__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--accent, #274b8f);
  color: #ffffff;
  flex: 0 0 auto;
}

.pay__biz {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink, #1b2230);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   The card
   -------------------------------------------------------------------------- */

.pay__card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e5e8ee);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27, 34, 48, .05), 0 10px 30px rgba(27, 34, 48, .07);
}

/* The 3px band across the top, the same accent as the rule on the invoice. */
.pay__rule {
  height: 3px;
  background: var(--accent, #274b8f);
}

.pay__rule--ok    { background: var(--ok, #1d6b45); }
.pay__rule--quiet { background: var(--line-strong, #c9cfda); }

.pay__body {
  padding: 28px 26px 26px;
}

.pay__body--centred {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.pay__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink, #1b2230);
}

.pay__lede {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft, #68727f);
}

.pay__eyebrow {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, #68727f);
}

/* The one number on the page. */
.pay__amount {
  margin: 6px 0 0;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink, #1b2230);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.pay__amount--sm {
  margin-top: 14px;
  font-size: 26px;
}

.pay__currency {
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-soft, #68727f);
}

/* --------------------------------------------------------------------------
   The invoice number strip
   -------------------------------------------------------------------------- */

.pay__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 18px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line, #e5e8ee);
  border-radius: 7px;
  background: var(--surface-2, #fafbfc);
}

.pay__meta--centred {
  justify-content: center;
}

.pay__meta dt {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-soft, #68727f);
}

.pay__meta dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #1b2230);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.pay__form {
  margin: 20px 0 0;
}

.pay__field + .pay__field {
  margin-top: 14px;
}

.pay__label {
  display: block;
  margin: 0 0 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink, #1b2230);
}

.pay__input {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* 16px stops iOS Safari zooming on focus */
  line-height: 1.4;
  color: var(--ink, #1b2230);
  background: var(--surface, #ffffff);
  border: 1px solid var(--line-strong, #c9cfda);
  border-radius: 7px;
  padding: 11px 12px;
  transition: border-color .12s ease, background-color .12s ease;
}

.pay__input::placeholder {
  color: var(--ink-faint, #97a0ad);
}

.pay__input:hover {
  border-color: #aeb6c2;
}

.pay__input:focus {
  outline: none;
  border-color: var(--accent, #274b8f);
  box-shadow: inset 0 0 0 1px var(--accent, #274b8f);
}

.pay__input:focus-visible {
  outline: 2px solid var(--accent, #274b8f);
  outline-offset: 1px;
}

/* The payment code reads as digits, so it is spaced like digits. */
.pay__input--code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.22em;
  font-weight: 600;
}

.pay__hint {
  margin: 5px 0 0;
  font-size: 12px;
  color: var(--ink-soft, #68727f);
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */

.pay__btn {
  display: block;
  width: 100%;
  margin: 20px 0 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
  background: var(--accent, #274b8f);
  border: 1px solid var(--accent, #274b8f);
  border-radius: 7px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}

.pay__btn:hover {
  background: var(--accent-hover, #1f3f79);
  border-color: var(--accent-hover, #1f3f79);
}

.pay__btn:active {
  background: #1b3768;
  border-color: #1b3768;
}

.pay__btn:focus-visible {
  outline: 2px solid var(--accent, #274b8f);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */

.pay__alert {
  margin: 16px 0 0;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--danger, #a52f2f);
  background: var(--danger-soft, #fbeaea);
  border: 1px solid var(--danger-line, #eec7c7);
  border-radius: 7px;
  text-align: left;
}

.pay__note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft, #68727f);
  text-align: center;
}

.pay__back {
  margin: 20px 0 0;
  font-size: 13px;
  text-align: center;
}

.pay__back a {
  color: var(--accent, #274b8f);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line, #c2d0e8);
  padding-bottom: 1px;
}

.pay__back a:hover {
  border-bottom-color: var(--accent, #274b8f);
}

.pay__back a:focus-visible {
  outline: 2px solid var(--accent, #274b8f);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Outcome icon
   -------------------------------------------------------------------------- */

.pay__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin: 0 0 16px;
  border-radius: 50%;
  border: 1px solid transparent;
}

.pay__icon--ok {
  color: var(--ok, #1d6b45);
  background: var(--ok-soft, #e8f4ed);
  border-color: var(--ok-line, #b8dcc8);
}

.pay__icon--quiet {
  color: var(--ink-soft, #68727f);
  background: var(--surface-sunk, #eef1f5);
  border-color: var(--line, #e5e8ee);
}

/* --------------------------------------------------------------------------
   Footer line
   -------------------------------------------------------------------------- */

.pay__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 18px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-faint, #97a0ad);
  text-align: center;
}

.pay__lock {
  display: inline-flex;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 460px) {
  .pay__body { padding: 24px 18px 22px; }
  .pay__amount { font-size: 32px; }
  .pay__amount--sm { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .pay__input,
  .pay__btn { transition: none; }
}

/* A deliberately quiet way back to the owner's own login. Clients have no
   use for it, so it sits below the fold of attention: small, muted, and
   without a button shape. */
.pay__signin {
  margin: 28px 0 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.pay__signin a {
  color: var(--ink-soft, #68727f);
  text-decoration: none;
  opacity: 0.65;
  padding: 6px 10px;
  border-radius: 5px;
  transition: opacity 0.2s, color 0.2s;
}

.pay__signin a:hover,
.pay__signin a:focus-visible {
  opacity: 1;
  color: var(--ink, #1b2230);
}