/* Customer screens only. Stored invoice documents use immutable versioned assets. */
:root { --green:#365e36; --ink:#243329; --muted:#607064; --line:#dce3d9; }
body.customer-site { background:#f6f7f2; color:var(--ink); font-family:Arial,Helvetica,sans-serif; line-height:1.55; min-height:100vh; }
.customer-site a { text-underline-offset:3px; }
.customer-site :focus-visible { outline:3px solid #59833b; outline-offset:4px; }
.customer-brand { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1048px; margin:auto; padding:24px 24px 21px; border-bottom:1px solid var(--line); }
.customer-brand>a { display:block; flex-shrink:0; text-decoration:none; max-width:70%; }
.customer-brand img { display:block; width:260px; height:100px; max-width:100%; object-fit:contain; object-position:left center; background:#fff; }
.brand-name { font-weight:700; font-size:22px; }
.brand-caption { color:var(--muted); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.customer-site .app-shell { max-width:1048px; padding:38px 24px 12px; }
.customer-site .card { border:1px solid var(--line); border-radius:18px; padding:30px; box-shadow:0 5px 24px rgba(36,51,41,.035); margin-bottom:24px; }
.customer-site h1,.customer-site h2 { color:var(--ink); line-height:1.2; letter-spacing:-.025em; }
.customer-site h1 { font-size:34px; margin:0; }
.customer-site h2 { font-size:24px; margin:0 0 12px; }
.customer-site p { margin:0 0 18px; }
.customer-site .eyebrow { color:var(--green); font-size:11px; text-transform:uppercase; letter-spacing:.13em; font-weight:700; margin:0 0 10px; }
.customer-site .intro { color:var(--muted); font-size:15px; line-height:1.7; max-width:680px; }
.customer-site .btn,.customer-site button { border:1px solid var(--green); border-radius:8px; background:var(--green); padding:13px 19px; font-size:14px; line-height:1.4; min-height:46px; text-align:center; transition:background .15s; }
.customer-site .btn:hover,.customer-site button:hover { background:#294d2b; }
.customer-site .btn.secondary { color:var(--green); background:#fff; border-color:#becdb9; }
.customer-site .btn.secondary:hover { background:#f0f4ed; }
.customer-site .actions { margin-top:20px; }
.customer-site .help,.customer-site .muted { color:var(--muted); line-height:1.6; }
.customer-site label { font-size:14px; }
.customer-site input,.customer-site textarea,.customer-site select { border:1px solid #a6b69f; border-radius:8px; padding:13px 14px; min-height:48px; color:var(--ink); font-size:16px; }
.customer-site input::placeholder { color:#7d8779; opacity:1; }
.customer-site input:focus { border-color:var(--green); }
.customer-site .help { margin-top:7px; font-size:12px; }
.customer-site .flash { font-size:14px; border-radius:10px; background:#f6f8f2; }
.customer-site .flash.error { background:#fff6f3; border-color:#b26752; }
.customer-site .flash.success { border-color:#c0d3b5; background:#edf4e8; }
.gate-shell { min-height:480px; }
.customer-site .customer-gate { max-width:536px; margin:5px auto 20px; padding:38px 40px; }
.customer-gate h1 { font-size:36px; margin-bottom:18px; }
.customer-gate form { margin-top:28px; }
.customer-gate #invoice_no { font-size:24px; font-variant-numeric:tabular-nums; letter-spacing:.07em; padding:14px 16px; }
.customer-gate .actions button { width:100%; display:flex; justify-content:space-between; }
.customer-site .gate-note { font-size:12px; color:var(--muted); margin:24px 0 0; text-align:center; }
.customer-site .topbar { margin-bottom:26px; }
.customer-site .invoice-overview { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center; }
.customer-site .invoice-number { color:var(--muted); font-size:13px; margin:0; }
.customer-site .amount-large { font-size:36px; line-height:1.25; margin-top:5px; letter-spacing:-.035em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.customer-site .definition-grid { grid-template-columns:auto 1fr; font-size:13px; margin:0; gap:10px 16px; }
.customer-site .definition-grid dt { color:var(--muted); }
.customer-site .invoice-overview>.flash { grid-column:1/-1; margin-bottom:0; }
.customer-site .status { border:0; background:#f8f0dc; color:#775715; padding:4px 12px; }
.customer-site .status.paid { background:#e7f1e1; color:#31542d; }
.customer-site .status.voided { background:#ecefeb; color:#53604f; }
.customer-site .qr-screen-wrap { overflow:visible; padding:12px 0 5px; }
.customer-site .qr-bill-online { width:100%; min-height:0; }
.customer-site .qr-bill-online .qr-payment-part { width:100%; height:auto; padding:0; }
.customer-site .qr-bill-online .qr-payment-part>h2 { font-size:12px; color:var(--muted); margin-bottom:12px; }
.customer-site .qr-bill-online .qr-payment-grid { grid-template-columns:215px minmax(0,1fr); gap:32px; }
.customer-site .qr-bill-online .qr-left { width:215px; }
.customer-site .qr-bill-online .qr-code-box { margin:0; }
.customer-site .qr-bill-online .qr-amount-grid { margin:8px 0 0 19px; }
.customer-site .qr-bill-online .qr-info { border-left:1px solid var(--line); padding:0 0 6px 28px; }
.customer-site .qr-bill-online .qr-label { font-size:11px; line-height:1.4; margin-top:14px; color:var(--muted); }
.customer-site .qr-bill-online .qr-info>.qr-label:first-child { margin-top:0; }
.customer-site .qr-bill-online .qr-value { font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.customer-site .qr-bill-online .qr-info>.qr-label:nth-last-child(2),.customer-site .qr-bill-online .qr-handwrite-box { display:none; }
.customer-site .vat-card { background:#edf2e8; box-shadow:none; }
.customer-site .vat-card p:not(.eyebrow) { font-size:14px; color:var(--muted); max-width:680px; margin-bottom:0; }
.customer-vat { max-width:900px!important; }
.customer-footer { display:flex; flex-wrap:wrap; justify-content:center; gap:5px 16px; max-width:1048px; margin:4px auto 0; padding:24px 24px 32px; font-size:11px; color:var(--muted); text-align:center; }
.skip-link { position:fixed; left:12px; top:-100px; z-index:10; padding:10px; background:#fff; opacity:0; pointer-events:none; }
.skip-link:focus-visible { top:12px; opacity:1; pointer-events:auto; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media(max-width:600px) {
  .customer-brand { padding:16px 20px; gap:14px; }
  .customer-brand img { width:205px; height:79px; }
  .brand-caption { font-size:9px; letter-spacing:.04em; max-width:95px; text-align:right; }
  .customer-site .app-shell { padding:24px 16px 8px; }
  .customer-site .card { padding:24px 20px; border-radius:14px; margin-bottom:18px; }
  .customer-site .customer-gate { margin:0 auto 14px; padding:28px 24px; }
  .customer-gate h1 { font-size:31px; }
  .customer-site h1 { font-size:27px; }
  .customer-site h2 { font-size:22px; }
  .customer-site .topbar { gap:18px; }
  .customer-site .invoice-overview { grid-template-columns:1fr; gap:22px; }
  .customer-site .amount-large { font-size:36px; }
  .customer-site .definition-grid { grid-template-columns:130px minmax(0,1fr); }
  .customer-site .qr-bill-online .qr-payment-grid { grid-template-columns:minmax(0,1fr); gap:26px; }
  .customer-site .qr-bill-online .qr-left { margin:0 auto; }
  .customer-site .qr-bill-online .qr-info { border-left:0; border-top:1px solid var(--line); padding:22px 0 2px; }
  .customer-site .payment-card .actions>.btn { width:100%; }
  .customer-site .vat-card .actions>.btn { width:100%; }
  .customer-footer { display:block; padding-top:20px; }
  .customer-footer>* { display:block; margin-top:4px; }
}