/* PayMidWare customer-facing pages (pay an invoice, approve a schedule, change or add a payment method, sign documents, sign up as a provider, register QR pay, legal pages).
   Colors, fonts and shadows come from the shared Lapis & Gold theme (pmw-tokens.css, pmw-fonts.css, pmw-theme.css). The only colors that can differ are a merchant's or
   provider's own branding (header accent, page background, card color), which PayBrandStyle delivers as the --pay-* variables below; this file never hard-codes one.

   Each page puts a class on <body> (page-pay, page-approve, page-change, page-addpm, page-pos, page-sign, page-estimate, page-signup, page-center, page-legal) so rules that only one page
   needs cannot leak into another. Pages with a gateway's hosted card fields stay on the light theme (see data-theme-lock on <html>). */

:root {
  --pay-bg: var(--pmw-bg);
  --pay-header: var(--pmw-accent);
  --pay-card-bg: var(--pmw-surface);
  --pay-card-text: var(--pmw-text);
  --pay-card-muted: var(--pmw-muted);
  --pay-card-divider: var(--pmw-border);
  --pay-btn-bg: var(--pmw-primary);
  --pay-btn-text: var(--pmw-on-primary);
}

* { box-sizing: border-box; }
body { margin: 0; padding: 32px 16px; background: var(--pay-bg); color: var(--pmw-text); line-height: 1.5; }
input, select, textarea, button { font-family: inherit; }

.card {
  max-width: 560px; margin: 0 auto; padding: 32px;
  background: var(--pay-card-bg); color: var(--pay-card-text);
  border-radius: var(--pmw-radius-lg); border-top: 6px solid var(--pay-header); box-shadow: var(--pmw-shadow);
}
.card h1, .card h2 { color: inherit; }
h1 { font-size: 1.4rem; margin: 0 0 4px; }
h2 { font-size: 1rem; margin: 20px 0 10px; }
.muted { color: var(--pay-card-muted); font-size: .9rem; }
.card a { color: inherit; }
.merchant-logo, .provider-logo { max-height: 48px; max-width: 220px; margin-bottom: 12px; display: block; }
.hidden { display: none; }

.banner {
  border-radius: var(--pmw-radius); padding: 12px 16px; margin: 16px 0; font-size: .95rem;
  background: var(--pmw-tint); color: var(--pmw-text); border: 1px solid var(--pmw-border); border-left: 4px solid var(--pmw-primary-2);
}
.banner.success { background: var(--pmw-success-tint); border-color: color-mix(in srgb, var(--pmw-success) 30%, var(--pmw-surface)); border-left-color: var(--pmw-success); }
.banner.error { background: var(--pmw-danger-tint); border-color: color-mix(in srgb, var(--pmw-danger) 30%, var(--pmw-surface)); border-left-color: var(--pmw-danger); }
.banner.info { background: var(--pmw-tint); border-color: color-mix(in srgb, var(--pmw-primary-2) 30%, var(--pmw-surface)); border-left-color: var(--pmw-primary-2); }
.banner.warn { background: var(--pmw-accent-tint); border-color: color-mix(in srgb, var(--pmw-accent) 40%, var(--pmw-surface)); border-left-color: var(--pmw-accent); }

/* The one primary button on a payment page: the merchant's button color if the card is branded, otherwise the PayMidWare primary. */
button#pay-button, button#approve-button, button#change-button, button#save-button {
  width: 100%; padding: 14px; font-size: 1.05rem; font-weight: 600;
  background: var(--pay-btn-bg); color: var(--pay-btn-text); border: 0; border-radius: var(--pmw-radius); cursor: pointer;
}
button#pay-button:disabled, button#approve-button:disabled, button#change-button:disabled, button#save-button:disabled { opacity: .6; cursor: default; }
#client-error { display: none; }

/* Hosted card and bank fields. */
#checkout-container, #bank-container, #card-container { margin: 16px 0; padding: 12px; border: 1px solid var(--pmw-border); border-radius: var(--pmw-radius); min-height: 40px; }
#checkout-container input, #bank-container input, #bank-container select, #card-container input {
  width: 100%; padding: 10px; margin-bottom: 8px; border: 1px solid var(--pmw-input-border); border-radius: var(--pmw-radius-sm); font-size: 1rem;
  background: var(--pmw-surface); color: var(--pmw-text);
}
label.checkbox { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; line-height: 1.45; margin: 12px 0; }
/* The box never stretches or squeezes, whichever container the label sits in (the card and bank containers above give every input width 100% and padding), so a long label wraps onto several lines beside it. */
label.checkbox > input, #checkout-container label.checkbox input, #bank-container label.checkbox input, #card-container label.checkbox input { flex: 0 0 auto; width: auto; padding: 0; margin: .25em 0 0; }
label.checkbox > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* Pay an invoice */
table.line-items { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .92rem; }
table.line-items th, table.line-items td { text-align: left; padding: 8px 4px; border-bottom: 1px solid var(--pay-card-divider); }
table.line-items th:last-child, table.line-items td:last-child { text-align: right; }
.totals { margin-top: 8px; font-size: .95rem; }
.totals .row { display: flex; justify-content: space-between; padding: 4px 0; }
.totals .row.total { font-weight: 600; font-size: 1.15rem; border-top: 1px solid var(--pay-card-divider); margin-top: 6px; padding-top: 10px; }

/* Approve a schedule / change a payment method */
.terms { margin: 20px 0; font-size: .95rem; }
.terms .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--pay-card-divider); }
.terms .row:last-child { border-bottom: none; }

/* Add a payment method */
.page-addpm label.checkbox { align-items: flex-start; margin: 10px 0; font-size: .95rem; }
.page-addpm label.checkbox input { margin-top: 3px; }
.fine { font-size: .8rem; margin: 12px 0 0; }

/* Register QR pay */
.page-pos { padding: 24px 12px; }
.page-pos .card { max-width: 480px; padding: 24px; }
.page-pos h1 { font-size: 1.3rem; }
table.items { width: 100%; border-collapse: collapse; margin: 16px 0 8px; font-size: .92rem; }
table.items td { padding: 6px 4px; border-bottom: 1px solid var(--pay-card-divider); vertical-align: top; }
table.items td:last-child { text-align: right; white-space: nowrap; }
.page-pos .totals .trow { display: flex; justify-content: space-between; padding: 3px 0; font-size: .95rem; }
.page-pos .totals .trow.pay { font-weight: 700; font-size: 1.3rem; border-top: 1px solid var(--pay-card-divider); margin-top: 8px; padding-top: 12px; }
.page-pos button#pay-button { margin-top: 4px; }
.tip-box { margin: 16px 0 0; }
.tip-box .label { font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.tip-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tip-buttons button { padding: 10px 12px; border: 1px solid var(--pmw-input-border); background: var(--pmw-surface); color: var(--pmw-text); border-radius: var(--pmw-radius); font-size: .95rem; cursor: pointer; }
.tip-buttons button.active { background: var(--pay-btn-bg); color: var(--pay-btn-text); border-color: var(--pay-btn-bg); }
.tip-buttons input { width: 7rem; padding: 10px; border: 1px solid var(--pmw-input-border); border-radius: var(--pmw-radius); font-size: 1rem; background: var(--pmw-surface); color: var(--pmw-text); }

/* Provider signup */
.page-signup label { display: block; font-size: .85rem; font-weight: 600; margin: 12px 0 4px; }
.page-signup input[type=text], .page-signup input[type=email], .page-signup input[type=tel], .page-signup input[type=url] {
  width: 100%; padding: 10px; border: 1px solid var(--pmw-input-border); border-radius: var(--pmw-radius-sm); font-size: 1rem; background: var(--pmw-surface); color: var(--pmw-text);
}
.page-signup .row2 { display: flex; gap: 12px; }
.page-signup .row2 > div { flex: 1; }
.page-signup .field-error { color: var(--pmw-danger); font-size: .85rem; margin-top: 2px; }
.page-signup fieldset { border: none; padding: 0; margin: 0; }
.page-signup button[type=submit] {
  width: 100%; margin-top: 20px; padding: 14px; font-size: 1.05rem; font-weight: 600;
  background: var(--pmw-primary); color: var(--pmw-on-primary); border: 0; border-radius: var(--pmw-radius); cursor: pointer;
}
.credential-box { background: var(--pmw-tint); border: 1px solid var(--pmw-border); border-radius: var(--pmw-radius); padding: 16px; margin-top: 12px; }
.credential-box code { font-size: 1.05rem; }

/* Sign documents */
.page-sign { padding: 24px 12px; }
.page-sign .card { max-width: 720px; padding: 28px; border-top: 0; }
.page-sign h2.step { font-size: 1.05rem; margin: 24px 0 8px; }
.page-sign .doc { border: 1px solid var(--pmw-border); border-radius: var(--pmw-radius); padding: 20px; margin: 12px 0; max-height: 60vh; overflow: auto; background: var(--pmw-surface); color: var(--pmw-text); line-height: 1.5; }
.page-sign .doc h2, .page-sign .doc h3, .page-sign .doc h4 { margin: 1em 0 .4em; }
.page-sign .doc table { border-collapse: collapse; width: 100%; }
.page-sign .doc td, .page-sign .doc th { border: 1px solid var(--pmw-border); padding: 6px 8px; text-align: left; }
.page-sign label.check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-size: .95rem; }
.page-sign label.check input { margin-top: 3px; }
.page-sign input[type=text] { width: 100%; padding: 10px; border: 1px solid var(--pmw-input-border); border-radius: var(--pmw-radius-sm); font-size: 1rem; background: var(--pmw-surface); color: var(--pmw-text); }
.page-sign input.name { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 1.5rem; }
.page-sign .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-sign button, .page-sign a.button { padding: 12px 18px; font-size: 1rem; font-weight: 600; background: var(--pay-btn-bg); color: var(--pay-btn-text); border: 0; border-radius: var(--pmw-radius); cursor: pointer; text-decoration: none; display: inline-block; }
.page-sign button.secondary { background: var(--pmw-surface); color: var(--pmw-text); border: 1px solid var(--pmw-input-border); }
.page-sign button.link { background: none; color: var(--pay-card-muted); border: none; padding: 0; font-weight: 400; text-decoration: underline; }
.page-sign canvas { width: 100%; max-width: 500px; height: 140px; border: 1px dashed var(--pmw-input-border); border-radius: var(--pmw-radius-sm); touch-action: none; background: var(--pmw-surface); display: block; }
.page-sign details { margin-top: 24px; }
.page-sign .consent { color: var(--pmw-text); background: var(--pmw-tint); border: 1px solid var(--pmw-border); border-radius: var(--pmw-radius); padding: 12px 16px; font-size: .9rem; }
.page-sign .consent p { margin: 6px 0; }

/* The estimate page (/estimate/{token}): a read-and-approve document. Same card and button look as the signing page. */
.page-estimate { padding: 24px 12px; }
.page-estimate .card { max-width: 760px; padding: 28px; border-top: 0; }
.page-estimate h2.step { font-size: 1.05rem; margin: 24px 0 8px; }
.page-estimate .merchant-logo { max-height: 56px; max-width: 220px; margin-bottom: 12px; }
.page-estimate .estimate-parties { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 12px 0; font-size: .9rem; line-height: 1.5; }
.page-estimate .estimate-text { white-space: pre-wrap; border: 1px solid var(--pmw-border); border-radius: var(--pmw-radius); padding: 14px 16px; background: var(--pmw-surface); color: var(--pmw-text); line-height: 1.5; font-size: .95rem; }
.page-estimate table { width: 100%; border-collapse: collapse; }
.page-estimate .estimate-lines th, .page-estimate .estimate-lines td { border-bottom: 1px solid var(--pmw-border); padding: 8px 6px; text-align: left; vertical-align: top; }
.page-estimate .estimate-lines th { font-size: .8rem; color: var(--pay-card-muted); font-weight: 600; }
.page-estimate .num { text-align: right; white-space: nowrap; }
.page-estimate .estimate-lines tr.not-included td { color: var(--pay-card-muted); text-decoration: line-through; }
.page-estimate .estimate-totals { margin-top: 12px; max-width: 360px; margin-left: auto; }
.page-estimate .estimate-totals td { padding: 4px 6px; }
.page-estimate .estimate-totals tr.total td { font-weight: 700; font-size: 1.1rem; border-top: 2px solid var(--pmw-border); }
.page-estimate label { display: block; font-size: .85rem; font-weight: 600; margin: 12px 0 4px; }
.page-estimate label.check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0; font-size: .95rem; font-weight: 400; }
.page-estimate label.check input { margin-top: 3px; }
.page-estimate input[type=text], .page-estimate textarea { width: 100%; padding: 10px; border: 1px solid var(--pmw-input-border); border-radius: var(--pmw-radius-sm); font-size: 1rem; background: var(--pmw-surface); color: var(--pmw-text); font-family: inherit; box-sizing: border-box; }
.page-estimate input.name { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 1.5rem; }
.page-estimate .row2 { display: flex; gap: 12px; flex-wrap: wrap; }
.page-estimate .row2 > div { flex: 1; min-width: 200px; }
.page-estimate button, .page-estimate a.button { margin-top: 12px; padding: 12px 18px; font-size: 1rem; font-weight: 600; background: var(--pay-btn-bg); color: var(--pay-btn-text); border: 0; border-radius: var(--pmw-radius); cursor: pointer; text-decoration: none; display: inline-block; }
.page-estimate button.secondary { background: var(--pmw-surface); color: var(--pmw-text); border: 1px solid var(--pmw-input-border); }
.page-estimate details { margin-top: 24px; }

/* Home and error pages: a small centered card with no merchant accent. */
.page-center .card { max-width: 480px; margin: 80px auto 0; text-align: center; border-top-color: var(--pmw-accent); }
.page-center p { color: var(--pmw-muted); }

/* Terms and privacy. */
.page-legal { padding: 24px 12px; line-height: 1.55; }
.page-legal .doc { max-width: 760px; margin: 0 auto; background: var(--pay-card-bg); color: var(--pay-card-text); border-radius: var(--pmw-radius-lg); box-shadow: var(--pmw-shadow); padding: 28px 32px; }
.page-legal h1 { font-size: 1.6rem; }
.page-legal h2 { font-size: 1.2rem; margin: 1.6em 0 .4em; }
.page-legal h3 { font-size: 1.05rem; margin: 1.3em 0 .3em; }
.page-legal .muted { color: var(--pay-card-muted); }
.page-legal table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.page-legal th, .page-legal td { border: 1px solid var(--pay-card-divider); padding: 6px 10px; text-align: left; vertical-align: top; }
.page-legal .nav { max-width: 760px; margin: 12px auto 0; text-align: center; font-size: .85rem; color: var(--pay-footer-text, var(--pmw-muted)); }
/* Only a sender who chose a footer text color changes the link color; otherwise the links keep the PayMidWare link color. */
.page-legal .nav a { color: var(--pay-footer-text, var(--pmw-primary)); }

/* Sandbox notice (the shared _EnvironmentBanner): a card in the warning colors. */
.card.alert-warning { background: var(--pmw-accent-tint); color: var(--pmw-text); border-top-color: var(--pmw-accent); box-shadow: none; padding: 16px 20px; }
.card.alert-warning p { margin: .4em 0 0; font-size: .9rem; }
.mb-3 { margin-bottom: 16px; }
.page-center .card.alert-warning { margin-top: 24px; text-align: left; }

@media (max-width: 480px) { body { padding: 16px 8px; } .card { padding: 22px 18px; } }

/* Error pages. */
.page-center .error-code { font-size: 3.5rem; font-weight: 700; line-height: 1; margin: 0 0 8px; color: var(--pmw-muted); }
.page-center .error-ref { font-size: .85rem; }
.page-center .error-ref code { word-break: break-all; }

/* The processing spinner (pmw-processing.js): covers the page while a payment is being sent. */
.pmw-processing {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: color-mix(in srgb, var(--pay-bg) 80%, transparent); backdrop-filter: blur(2px); outline: none;
}
.pmw-processing[hidden] { display: none; }
.pmw-processing-box {
  max-width: 320px; width: 100%; padding: 28px 24px; text-align: center; background: var(--pmw-surface);
  border: 1px solid var(--pmw-border); border-radius: var(--pmw-radius); box-shadow: var(--pmw-shadow);
}
.pmw-spinner {
  width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--pay-btn-bg, var(--pmw-primary)) 20%, transparent);
  border-top-color: var(--pay-btn-bg, var(--pmw-primary)); animation: pmw-spin .9s linear infinite;
}
.pmw-processing-text { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; }
.pmw-processing-note { margin: 0; font-size: .875rem; color: var(--pmw-muted); }
@keyframes pmw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pmw-spinner { animation-duration: 2.4s; } }