/* Zall Pay, signed-in customer pages: same look as the sign-in landing (login.html)
   and zallandsons.com. Loaded AFTER style.css by dashboard.html, select-account.html,
   register.html and quickpay.html only; admin.html keeps style.css as is.
   Presentation only: no ids, script classes, data attributes or handlers change. 2026-09-18. */

:root{
  --r:10px;            /* every var(--r) corner on these pages is 10px */
  --rl:10px;
  --line:#e4e8ee;
  --ink:#101828;
  --ink-2:#475467;
  --ground:#f5f7fa;
}
html{-webkit-text-size-adjust:100%}
body{font-size:14.5px;line-height:1.5;background:var(--ground);color:var(--ink)}
a{color:var(--brand-dark)}

/* ── Header (white, sticky, site logo + "Zall Pay") ── */
.site-hdr{height:64px;padding:0 24px;box-shadow:none;gap:12px}
.site-logo{min-width:0;flex-shrink:1}
.site-logo img{height:34px}
.site-logo-text{margin-left:12px;padding-left:12px}
.site-logo-name{font-size:17px;white-space:nowrap}
.site-logo-sub{font-size:11px;letter-spacing:.03em;white-space:nowrap}
.site-hdr-right{min-width:0;flex-shrink:1;gap:12px}
.site-hdr-co{font-size:14px}
.site-hdr-btn{font-size:14px;font-weight:600;padding:8px 14px;border-radius:var(--r);border-color:var(--brds);white-space:nowrap}
.site-hdr-link{font-size:14px;font-weight:600;color:var(--ink);padding:6px 10px;white-space:nowrap}
.site-hdr-link:hover{color:var(--brand-dark);background:var(--brand-light)}
.tab-nav{top:64px}

/* ── Tabs ── */
.tab{font-size:14.5px;padding:12px 16px}
.tab.on{color:var(--brand);border-bottom-color:var(--brand)}
.tbadge{font-size:10px;padding:1px 6px}

/* ── Buttons: blue filled primary, ghost secondary, 10px corners ── */
button{font-size:14px;font-weight:600;padding:9px 14px;border-radius:var(--r);border-color:var(--brds)}
button.pri,button.accent{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
button.pri:hover:not([disabled]),button.accent:hover:not([disabled]){background:var(--brand-dark);border-color:var(--brand-dark)}
button.outline{background:#fff;color:var(--brand-dark);border:2px solid var(--brand);font-weight:700}
button.outline:hover:not([disabled]){background:var(--brand-light)}
button.ghost{background:#fff;border:1px solid var(--brds);color:var(--ink-2)}
button.ghost:hover:not([disabled]){background:var(--ground);color:var(--ink)}
button.sm,button.ghost.sm{font-size:13px;padding:6px 11px}
button.danger,button.ghost.sm.danger{background:var(--rb);color:var(--rcl);border-color:var(--rbr)}
button.teal{background:var(--brand-light);color:var(--brand-ink);border-color:#c5d3e8}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#fff;color:var(--brand-dark) !important;border:2px solid var(--brand);border-radius:var(--r);padding:8px 16px;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.btn-ghost:hover{background:var(--brand-light)}
.btn-blue{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--brand);color:#fff !important;border:2px solid var(--brand);border-radius:var(--r);padding:8px 16px;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.btn-blue:hover{background:var(--brand-dark);border-color:var(--brand-dark)}

/* ── Forms ── */
input,select,textarea{font-size:15px;padding:10px 12px;border-color:var(--brds);border-radius:8px}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(9,113,206,.12)}
label{font-size:12.5px;letter-spacing:.03em}
.hint{font-size:12.5px;color:var(--ink-2)}
.err,.ok{font-size:13.5px}
.empty{font-size:14px;color:var(--ink-2)}

/* ── Cards, sections, stats ── */
.card{border-color:var(--line);border-radius:var(--r)}
.card-pad{padding:18px 20px}
.sec h3{font-size:16px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px}
.sgrid{gap:12px}
.scard{padding:16px 18px}
.snum{font-size:24px}
.slbl{font-size:13px;color:var(--ink-2)}

/* ── Tables: 13.5px, scroll inside their own box on a phone ── */
.tw{border-color:var(--line);border-radius:var(--r);overflow-x:auto;-webkit-overflow-scrolling:touch}
th{font-size:12.5px;padding:10px 12px;background:var(--ground);border-bottom-color:var(--line)}
td{font-size:13.5px;padding:11px 12px;border-bottom-color:var(--line)}
.mono{font-size:13px}

/* ── Badges: meaning colours kept, 10px corners, one type size ── */
.badge{font-size:11.5px;padding:3px 9px;border-radius:var(--r)}

/* ── Modals ── */
.modal{border-radius:var(--r)}
.modal-hdr{font-size:15px;padding:15px 20px}
.modal-body{font-size:14px}
.modal-foot{background:var(--ground);border-top-color:var(--line)}

/* ── Notices ── */
.ach-info{font-size:13px;border-radius:var(--r)}
.ach-auth{font-size:12.5px;border-radius:var(--r)}
.check-row span{font-size:13px}
.credit-bar{font-size:14px;border-radius:var(--r)}
.pay-lbl,.date-note{font-size:13px}
.acct-confirm{font-size:13.5px;border-radius:var(--r)}
.routing-status{font-size:12.5px}

/* ── Auto-Pay banner: same card language as the rest, no gradient ── */
.autopay-banner{background:#fff;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);padding:16px 20px;box-shadow:none}
.autopay-banner .ab-icon{width:40px;height:40px;border-radius:8px;background:var(--brand-light);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:20px}
.autopay-banner .ab-title{font-size:15px;color:var(--ink)}
.autopay-banner .ab-sub{font-size:13.5px;color:var(--ink-2);opacity:1}
.autopay-slider{background:var(--brds)}
input:checked + .autopay-slider{background:var(--brand)}
input:checked + .autopay-slider:before{background:#fff}

/* ── Link tiles (Place an Order etc.): white card, blue icon box ── */
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.tile:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(16,24,40,.06)}
.tile-icon{width:40px;height:40px;border-radius:8px;background:var(--brand-light);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.tile-title{font-size:15px;font-weight:700;color:var(--ink)}
.tile-sub{font-size:13.5px;color:var(--ink-2);margin-top:2px}
.tile-arrow{color:var(--brand);font-size:18px;flex-shrink:0}

/* ── Page footer: same dark footer as the sign-in page ── */
.site-foot{background:var(--ink);color:#cfd6e0;padding:36px 24px 10px;font-size:15px;line-height:1.6;margin-top:48px}
.site-foot a{color:#fff;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.site-foot h2{color:#fff;font-size:16px;margin:0 0 .6em;font-weight:700}
.site-foot p{margin:0 0 .6em}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:6px}
.site-foot-in{max-width:1120px;margin:0 auto}
.site-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
.site-foot-logo{width:170px;height:auto;background:#fff;padding:8px 10px;border-radius:8px;display:block;margin-bottom:12px}
.site-foot .hours li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #22304a;padding-bottom:4px}
.site-foot .hours span{color:#cfd6e0}
.site-foot-legal{border-top:1px solid #22304a;margin-top:26px;padding:14px 0;font-size:13px;color:#98a2b3}

/* ── Rows the page builds with inline styles at runtime (invoice cards, payment
   history, credits, bank accounts, contacts). That markup lives in script and is
   out of bounds, so the type scale is lifted here instead: each inline size maps
   to its larger sibling. Static markup already carries the new sizes directly. ── */
body [style*="font-size:9px"]{font-size:10.5px !important}
body [style*="font-size:10px"]{font-size:11.5px !important}
body [style*="font-size:10.5px"]{font-size:11.5px !important}
body [style*="font-size:11px"]{font-size:12.5px !important}
body [style*="font-size:12px"]{font-size:13.5px !important}
body [style*="font-size:13px"]{font-size:14px !important}
body [style*="border-radius:3px"],body [style*="border-radius:4px"],body [style*="border-radius:6px"]{border-radius:6px !important}
body [style*="border-radius:12px"],body [style*="border-radius:16px"],body [style*="border-radius:20px"]{border-radius:var(--r) !important}
body [style*="background:#0072C6"]{background:var(--brand) !important}

/* ── Tablet ── */
@media(max-width:640px){
  .site-hdr{height:56px;padding:0 16px}
  .site-logo img{height:28px}
  .site-logo-sub{display:none}
  .hide-phone{display:none}
  .tab-nav{top:56px}
  .wrap,.wrap-full{padding:0 16px 40px}
  .site-foot{padding:28px 16px 8px}
  .site-foot-grid{grid-template-columns:1fr 1fr}
}
/* ── Phone ── */
@media(max-width:480px){
  body{font-size:14px}
  .site-hdr{height:52px;padding:0 12px;gap:8px}
  .site-logo{flex-shrink:0}
  .site-logo img{height:24px}
  .site-logo-text{display:none}   /* the logo already says who we are; the tab title says Zall Pay */
  .site-hdr-right{gap:6px}
  .site-hdr-co{font-size:12px;max-width:90px}
  .site-hdr-btn{font-size:12.5px;padding:6px 9px}
  .site-hdr-link{font-size:12.5px;padding:4px 5px}
  .tab-nav{top:52px}
  .hide-phone{display:none}
  .tab{font-size:13px;padding:10px 12px}
  .wrap,.wrap-full{padding:0 16px 32px}
  button{font-size:14px;padding:10px 14px}
  button.sm,button.ghost.sm{font-size:13px;padding:8px 12px}
  td{font-size:13px;padding:10px}
  th{font-size:12px;padding:9px 10px}
  table{min-width:420px}   /* the .tw box scrolls; the page never does */
  .tile{padding:12px 14px}
  .site-foot-grid{grid-template-columns:1fr}
  .modal{margin:0}
  .modal-body{padding:14px}
}