/* The Counter: shared look, matching zallandsons.com and Zall Pay (2026-09-18).
   Tokens copied from zallandsons.com assets/css/site.css. Loaded by every page
   in <head>; header.js draws the header and footer that use the .zc-* rules. */
:root{
  --zc-blue:#0971ce; --zc-blue-dark:#075aa6; --zc-blue-ink:#063f74;
  --zc-ink:#101828; --zc-ink-2:#475467; --zc-line:#e4e8ee;
  --zc-ground:#f5f7fa; --zc-navy:#0b1220;
  --zc-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
html body{font-family:var(--zc-font)}
body{color:var(--zc-ink)}

/* Header: white, sticky, the website logo, like zallandsons.com and Zall Pay. */
.zc-hdr{position:sticky;top:0;z-index:1500;background:#fff;border-bottom:1px solid var(--zc-line);font-family:var(--zc-font)}
.zc-bar{max-width:1120px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.zc-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.zc-brand img{width:150px;height:auto;display:block}
.zc-brand span{border-left:1px solid var(--zc-line);padding-left:12px;font-weight:700;font-size:17px;color:var(--zc-ink);white-space:nowrap}
.zc-nav{display:flex;align-items:center;gap:20px}
.zc-nav a{font-weight:600;font-size:15px;color:var(--zc-ink);text-decoration:none;white-space:nowrap}
.zc-nav a:hover{color:var(--zc-blue-dark)}

/* Signed-in strip, under the header. */
.zc-session{background:var(--zc-ground);border-bottom:1px solid var(--zc-line);font-family:var(--zc-font);font-size:13.5px;color:var(--zc-ink-2)}
.zc-session-in{max-width:1120px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.zc-session b{color:var(--zc-ink)}
.zc-session a{color:var(--zc-blue-dark);font-weight:600;text-decoration:none}
.zc-session a:hover{text-decoration:underline}
.zc-session .zc-acct{border:2px solid var(--zc-blue);border-radius:8px;padding:5px 12px;background:#fff}

/* Footer: dark ink, like the website and Zall Pay. */
.zc-foot{background:var(--zc-ink);color:#cfd6e0;font-family:var(--zc-font);font-size:.9375rem;line-height:1.6;margin-top:40px}
.zc-foot a{color:#fff;text-decoration:none}
.zc-foot a:hover{text-decoration:underline}
.zc-foot h2{color:#fff;font-size:1rem;margin:0 0 .6em}
.zc-foot ul{list-style:none;margin:0;padding:0}
.zc-foot li{margin-bottom:6px}
.zc-foot-grid{max-width:1120px;margin:0 auto;padding:36px 20px 0;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
.zc-foot-logo{width:170px;height:auto;background:#fff;padding:8px 10px;border-radius:8px;display:block;margin-bottom:12px}
.zc-foot p{margin:0 0 .8em}
.zc-foot .hours li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #22304a;padding-bottom:4px}
.zc-legal{max-width:1120px;margin:26px auto 0;padding:14px 20px;border-top:1px solid #22304a;font-size:.8125rem;color:#98a2b3}

/* Buttons that pages can use. */
.zc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 20px;border-radius:10px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid var(--zc-blue);background:var(--zc-blue);color:#fff}
.zc-btn:hover{background:var(--zc-blue-dark);border-color:var(--zc-blue-dark)}
.zc-btn.ghost{background:#fff;color:var(--zc-blue-dark)}
.zc-btn.ghost:hover{background:#eef5fc}

@media (max-width:960px){ .zc-foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){
  .zc-bar{padding:8px 16px;min-height:56px}
  .zc-brand img{width:118px}
  .zc-brand span{font-size:15px;padding-left:10px}
  .zc-nav{gap:14px;width:100%;justify-content:flex-start;padding-bottom:4px}
  .zc-nav a{font-size:14px}
  .zc-nav .zc-wide{display:none}
  .zc-session-in{padding:8px 16px}
  .zc-foot-grid{grid-template-columns:1fr;padding:28px 16px 0}
}

/* "Something off?" pill and dialog (2026-10-18) */
.zc-off{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:1400;background:var(--zc-blue);color:#fff;border:0;border-radius:999px;padding:12px 18px;font:700 14px var(--zc-font);box-shadow:0 8px 24px rgba(9,113,206,.35);cursor:pointer}
.zc-off:hover{background:var(--zc-blue-dark)}
.zc-off-inline{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--zc-blue);text-decoration:none;cursor:pointer;background:none;border:0;padding:0;font-family:inherit}
.zc-off-inline:hover{text-decoration:underline}
.zc-off-wrap{position:fixed;inset:0;background:rgba(16,24,40,.45);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px;font-family:var(--zc-font)}
.zc-off-box{background:#fff;border-radius:14px;max-width:520px;width:100%;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.zc-off-box h2{margin:0 0 6px;font-size:19px;color:var(--zc-ink)}
.zc-off-sub{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--zc-ink-2)}
.zc-off-pre{margin:0 0 10px;padding:10px 12px;background:var(--zc-ground);border:1px solid var(--zc-line);border-radius:8px;font:13px/1.5 var(--zc-font);white-space:pre-wrap;color:var(--zc-ink-2)}
.zc-off-txt,.zc-off-email{width:100%;box-sizing:border-box;padding:10px 12px;font:14px var(--zc-font);border:1px solid #cbd5e1;border-radius:8px;margin:0 0 10px}
.zc-off-row{display:flex;gap:10px;flex-wrap:wrap}
.zc-off-send{flex:1;background:var(--zc-blue);color:#fff;border:0;border-radius:10px;padding:12px 16px;font:700 15px var(--zc-font);cursor:pointer}
.zc-off-send:disabled{opacity:.6;cursor:default}
.zc-off-cancel{background:none;border:0;color:var(--zc-ink-2);font:14px var(--zc-font);cursor:pointer;padding:12px}
.zc-off-msg{margin:8px 0 0;font-size:13px;color:#b42318;min-height:1em}
