/* az-login.css — the shared AZ sign-in look (1 Oct 2026). Root element: <div class="azl" style="--az-brand:#hex">.
   Same file in Book AZ's sister products: POS AZ, SEO AZ, Web AZ, Care AZ, VM TECH, VM Tech Remote Support.
   Original note: AZ sign-in look (1 Oct 2026): every VM TECH product signs in on the same panel as Book AZ —
   warm page, white card, Fraunces "Welcome back", Manrope text, one solid button in the brand colour,
   outline buttons for the code options. Loaded LAST so it wins over portal/theme/vm-ui. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Manrope:wght@400;500;600;700&display=swap');

html body .azl{
  --az-p:var(--az-brand,#b3202e);--az-bg:#fbfaf7;--az-surface:#fff;--az-ink:#1a1a1a;--az-ink2:#5c6470;--az-line:#e6e2d8;--az-r:10px;
  max-width:448px;margin:0 auto;padding:clamp(24px,6vh,64px) 16px 32px;width:100%;
  font-family:Manrope,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;align-items:center;gap:24px
}
html body:has(.azl){background:#fbfaf7}
html body .azl,html body .azl *,html body .azl *::before,html body .azl *::after{box-sizing:border-box!important}
html body .azl > *{width:100%}
html body .azl .auth-logo{display:flex;justify-content:center;margin:0;width:auto}
html body .azl .auth-logo svg{height:30px;width:auto;display:block}

html body .azl .auth-card{
  background:var(--az-surface)!important;border:1px solid var(--az-line)!important;border-radius:calc(var(--az-r) + 4px)!important;
  box-shadow:0 1px 2px rgba(0,0,0,.04)!important;padding:24px!important;display:flex;flex-direction:column;gap:16px;color:var(--az-ink)
}
html body .azl .auth-card form{display:flex;flex-direction:column;gap:16px;margin:0}
html body .azl .auth-card h1{font:600 30px/1.15 Fraunces,Georgia,serif!important;letter-spacing:-.01em;color:var(--az-ink)!important;margin:0!important}
html body .azl .auth-sub{font-size:14px!important;color:var(--az-ink2)!important;margin:0!important;line-height:1.5}
html body .azl .auth-sub a{color:var(--az-p);font-weight:600}

html body .azl .auth-label{display:block;font:600 12px/1.2 Manrope,sans-serif!important;letter-spacing:.04em!important;text-transform:uppercase;color:var(--az-ink2)!important;margin:0 0 -10px!important}
html body .azl .auth-card input:not([type=radio]):not([type=checkbox]){
  height:auto!important;width:100%;background:var(--az-surface);color:var(--az-ink);border:1px solid var(--az-line)!important;border-radius:var(--az-r)!important;
  padding:10px 12px!important;font:500 16px Manrope,sans-serif!important;outline:none!important;box-shadow:none;
  margin:0!important;min-height:0!important;background:var(--az-surface)!important
}
html body .azl .auth-card input:not([type=radio]):not([type=checkbox]):focus{border-color:var(--az-p)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--az-p) 20%,transparent)!important}
html body .azl .auth-card input[inputmode=numeric],html body .azl .code-input{text-align:center;font-size:24px!important;letter-spacing:.4em!important}

html body .azl .auth-btn{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;height:auto!important;margin:0!important;padding:12px 16px!important;border:0;
  border-radius:var(--az-r)!important;background:var(--az-p)!important;color:#fff;font:600 14px Manrope,sans-serif!important;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.08)!important;transition:filter .15s
}
html body .azl .auth-btn:hover{filter:brightness(1.1)}
html body .azl .auth-btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--az-p) 30%,transparent)!important}

html body .azl .auth-or{font-size:12px!important;color:var(--az-ink2)!important;text-align:center;margin:0 0 -8px!important}
html body .azl .auth-alt{
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;height:auto!important;padding:10px 16px!important;
  background:var(--az-surface);color:var(--az-ink);border:1px solid var(--az-line)!important;border-radius:var(--az-r)!important;
  font:600 14px Manrope,sans-serif!important;text-decoration:none
}
html body .azl .auth-alt:hover{background:var(--az-bg)}

html body .azl .auth-check{display:flex;align-items:center;gap:8px;margin:0!important;font:500 14px Manrope,sans-serif!important;color:var(--az-ink)!important}
html body .azl .auth-check input{width:16px;height:16px;accent-color:var(--az-p)}
html body .azl .auth-help,html body .azl .auth-call{font-size:12px!important;color:var(--az-ink2)!important;text-align:center;margin:0!important}
html body .azl .auth-help a,html body .azl .auth-call a{color:var(--az-p)}
html body .azl .auth-foot{font-size:14px!important;color:var(--az-ink2)!important;text-align:center;margin:0!important;padding:0!important;border:0!important}
html body .azl .auth-foot a{color:var(--az-p)!important;font-weight:600!important}
html body .azl .code-resend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px}
html body .azl .code-resend form{display:inline;gap:0}
html body .azl .link-btn{background:none;border:0;padding:0;font:500 12px Manrope,sans-serif;color:var(--az-ink2);cursor:pointer}
html body .azl .link-btn:hover{color:var(--az-p)}
html body .azl .choice label{border-radius:var(--az-r)!important}
html body .azl .staff-link{display:flex;align-items:center;justify-content:center;gap:6px;font:500 12px Manrope,sans-serif;color:var(--az-ink2);text-decoration:none;width:auto}
html body .azl .staff-link svg{width:14px;height:14px}
html body .azl .staff-link:hover{color:var(--az-p)}
html body .azl .az-legal{font:500 12px Manrope,sans-serif;color:var(--az-ink2);text-align:center;margin:0}
html body .azl .az-legal a{color:inherit}
@media (max-width:480px){html body .azl .auth-card{padding:20px!important}html body .azl .auth-card h1{font-size:26px!important}}
/* helpers used by every product's markup */
html body .azl .auth-row{display:flex;gap:8px}
html body .azl .auth-row > *,html body .azl .auth-row form{flex:1;display:flex}
html body .azl .auth-row .auth-alt{width:100%}
html body .azl button.auth-alt{cursor:pointer}
html body .azl .auth-alt:disabled{opacity:.5;cursor:not-allowed}
html body .azl .auth-err{background:color-mix(in srgb,#c0392b 8%,#fff);color:#b42318;border:1px solid color-mix(in srgb,#c0392b 28%,transparent);border-radius:var(--az-r);padding:10px 12px;font:500 14px Manrope,sans-serif;margin:0}
html body .azl .auth-who{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--az-bg);border:1px solid var(--az-line);border-radius:var(--az-r);padding:10px 12px;font:500 14px Manrope,sans-serif}
html body .azl .auth-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
html body .azl .auth-who button,html body .azl .auth-link{background:none;border:0;padding:0;font:600 13px Manrope,sans-serif;color:var(--az-p);cursor:pointer}
html body .azl .auth-stack{display:flex;flex-direction:column;gap:8px}
html body .azl .auth-stack form{display:flex}
html body .azl .auth-stack .auth-alt{width:100%}
html body .azl details > summary{list-style:none}
html body .azl details > summary::-webkit-details-marker{display:none}