/* Zoey modern login. Used by resources/views/auth/layout-modern.blade.php only. */
:root {
  /* Zoey brand palette, from the account manager's existing styles (pixafy.css,
     app.css) and the logo: navy #112C3E, teal #00B099, blue #32669E,
     logo gray #8E9CA6 and logo light blue #7ED5F1. Font: Muli (Mulish).
     Buttons use a darker shade of the Zoey teal (#00B099) so white text meets
     WCAG AA contrast (4.56:1; the original teal is 2.74:1). */
  --zl-ink: #112C3E;
  --zl-muted: #5E6E76;
  --zl-line: #D2E7ED;
  --zl-field: #F4FAFC;
  --zl-surface: #FFFFFF;
  --zl-link: #32669E;
  --zl-harbor: #112C3E;
  --zl-harbor-line: #24455A;
  --zl-harbor-text: #FFFFFF;
  --zl-harbor-muted: #8E9CA6;
  --zl-mint: #7ED5F1;
  --zl-green: #008573;
  --zl-green-hover: #00705F;
  --zl-error-bg: #FDECEA;
  --zl-error: #B42318;
  --zl-ok-bg: #E6F7F4;
  --zl-ok: #00735F;
  --zl-sans: "Mulish", "Muli", "Segoe UI", system-ui, -apple-system, sans-serif;
  --zl-display: "Mulish", "Muli", "Segoe UI", system-ui, -apple-system, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.zl {
  font-family: var(--zl-sans); font-size: 16px; line-height: 1.5;
  color: var(--zl-ink); background: var(--zl-surface);
  -webkit-font-smoothing: antialiased;
}
.zl-shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100%; }
@media (min-width: 960px) { .zl-shell { grid-template-columns: minmax(460px, 5fr) 7fr; } }

/* Form side */
.zl-panel { display: flex; flex-direction: column; min-height: 100vh; padding: 28px 24px 24px; }
@media (min-width: 600px) { .zl-panel { padding: 44px 56px 28px; } }
@media (max-width: 959px) { .zl-panel { border-top: 6px solid var(--zl-harbor); } }
.zl-logo { display: inline-block; }
.zl-logo img { display: block; height: 30px; width: auto; }
.zl-panel-inner { width: 100%; max-width: 380px; margin: auto; padding: 40px 0; }
.zl-title {
  font-family: var(--zl-display); font-weight: 800; font-size: 2rem;
  line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 6px;
}
.zl-sub { color: var(--zl-muted); margin: 0 0 28px; }

.zl-alert { border-radius: 10px; padding: 12px 14px; font-size: .9375rem; margin: 0 0 20px; }
.zl-alert ul { margin: 0; padding: 0; list-style: none; }
.zl-alert li + li { margin-top: 4px; }
.zl-alert--error { background: var(--zl-error-bg); color: var(--zl-error); }
.zl-alert--ok { background: var(--zl-ok-bg); color: var(--zl-ok); }

.zl-field { margin: 0 0 18px; }
.zl-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.zl-label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: 6px; }
.zl-label-row .zl-label { margin-bottom: 0; }
.zl-link {
  color: var(--zl-link); font-weight: 600; font-size: .875rem;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(50, 102, 158, .35);
}
.zl-link:hover { text-decoration-color: currentColor; }

.zl-input-wrap { position: relative; }
.zl-input {
  width: 100%; height: 48px; padding: 0 14px;
  font: inherit; color: inherit; background: var(--zl-field);
  border: 1px solid var(--zl-line); border-radius: 10px;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.zl-input:hover { border-color: #B9C7CD; }
.zl-input:focus { outline: none; background: #fff; border-color: var(--zl-green); box-shadow: 0 0 0 3px rgba(0, 133, 115, .22); }
.zl-input--pw { padding-right: 76px; }
.zl-reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  height: 36px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--zl-muted);
  font: 500 .8125rem var(--zl-sans); cursor: pointer;
}
.zl-reveal:hover { color: var(--zl-ink); background: rgba(19, 36, 44, .06); }

.zl-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 50px; margin-top: 6px;
  border: 0; border-radius: 10px; background: var(--zl-green); color: #fff;
  font: 600 1rem var(--zl-sans); cursor: pointer;
  transition: background-color .15s, transform .1s;
}
.zl-btn:hover { background: var(--zl-green-hover); }
.zl-btn:active { transform: translateY(1px); }
.zl-btn[disabled] { cursor: progress; opacity: .85; }
.zl-spinner {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  animation: zl-spin .7s linear infinite;
}
.zl-btn.is-busy .zl-spinner { display: inline-block; }
@keyframes zl-spin { to { transform: rotate(360deg); } }

.zl-reveal:focus-visible, .zl-btn:focus-visible, .zl-link:focus-visible, .zl-logo:focus-visible {
  outline: 2px solid var(--zl-green); outline-offset: 2px;
}

.zl-google { display: flex; justify-content: center; min-height: 44px; }
.zl-or { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--zl-muted); font-size: .8125rem; }
.zl-or::before, .zl-or::after { content: ""; flex: 1; height: 1px; background: var(--zl-line); }
.zl-captcha-v2 { margin: 4px 0 10px; }
.zl-fineprint { margin: 16px 0 0; font-size: .75rem; color: var(--zl-muted); }
.zl-fineprint a { color: inherit; }
/* The v3 badge may be hidden because .zl-fineprint carries Google's required notice. */
.grecaptcha-badge { visibility: hidden; }
.zl-notice { margin-top: 24px; padding: 14px; border: 1px dashed var(--zl-line); border-radius: 10px; font-size: .875rem; color: var(--zl-muted); }
.zl-notice p { margin: 0 0 6px; }

.zl-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px;
  width: 100%; max-width: 380px; margin: 0 auto;
  font-size: .8125rem; color: var(--zl-muted);
}
.zl-foot a { color: inherit; }

/* Brand side: a purchase order being filled in */
.zl-brand { display: none; }
@media (min-width: 960px) {
  .zl-brand {
    display: flex; flex-direction: column; justify-content: center;
    position: relative; overflow: hidden;
    padding: 64px clamp(48px, 6vw, 104px);
    background: var(--zl-harbor); color: var(--zl-harbor-text);
  }
}
.zl-brand-head {
  font-family: var(--zl-display); font-weight: 800;
  font-size: clamp(2.75rem, 4.6vw, 4.5rem); line-height: 1.02;
  letter-spacing: -0.03em; max-width: 11ch; margin: 0 0 56px;
}
.zl-sheet { width: 100%; max-width: 540px; font-variant-numeric: tabular-nums; }
.zl-sheet-title { display: flex; justify-content: space-between; color: var(--zl-harbor-muted); font-size: .875rem; padding-bottom: 10px; border-bottom: 1px solid var(--zl-harbor-muted); }
.zl-row {
  display: grid; grid-template-columns: 1fr 5ch 9ch; gap: 24px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--zl-harbor-line);
}
.zl-item { font-weight: 500; }
.zl-sku { display: block; color: var(--zl-harbor-muted); font-size: .8125rem; font-weight: 400; }
.zl-qty { color: var(--zl-harbor-muted); text-align: right; }
.zl-amt { text-align: right; font-weight: 600; }
.zl-row--total { border-bottom: 0; padding-top: 18px; font-size: 1.25rem; }
.zl-row--total .zl-amt { color: var(--zl-mint); }
.zl-terms {
  display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 999px;
  background: rgba(126, 213, 241, .14); color: var(--zl-mint); font-size: .8125rem; font-weight: 500;
}
.zl-brand-foot { margin: 48px 0 0; max-width: 44ch; color: var(--zl-harbor-muted); font-size: .9375rem; }

/* The one orchestrated moment: order lines get entered one after another. */
.zl-lines .zl-row { animation: zl-enter .01s steps(1) both; }
.zl-lines .zl-row:nth-child(1) { animation-delay: .35s; }
.zl-lines .zl-row:nth-child(2) { animation-delay: .75s; }
.zl-lines .zl-row:nth-child(3) { animation-delay: 1.15s; }
.zl-lines .zl-row:nth-child(4) { animation-delay: 1.7s; }
@keyframes zl-enter { from { visibility: hidden; } to { visibility: visible; } }
.zl-lines .zl-row--total .zl-amt { animation: zl-glow 1.2s ease-out 1.7s both; }
@keyframes zl-glow { from { color: var(--zl-harbor-text); } to { color: var(--zl-mint); } }

@media (prefers-reduced-motion: reduce) {
  .zl-lines .zl-row, .zl-lines .zl-row--total .zl-amt { animation: none; }
  .zl-spinner { animation-duration: 2s; }
}

/* Sign-in options */
[hidden] { display: none !important; }
.zl-sso { display: grid; gap: 10px; }
.zl-btn-outline {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; max-width: 400px; height: 44px; margin: 0 auto;
  border: 1px solid #DADCE0; border-radius: 6px; background: #fff;
  color: #3C4043; font: 500 .9375rem var(--zl-sans); text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.zl-btn-outline:hover { background: #F8FAFB; border-color: #C5CCD0; }
.zl-btn-outline:focus-visible { outline: 2px solid var(--zl-green); outline-offset: 2px; }
.zl-alt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.zl-alt-btn {
  flex: 1 1 140px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 12px; border: 1px solid var(--zl-line); border-radius: 10px;
  background: transparent; color: var(--zl-link); font: 600 .875rem var(--zl-sans);
  text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s;
}
.zl-alt-btn:hover { background: var(--zl-field); border-color: #B9C7CD; }
.zl-alt-btn:focus-visible { outline: 2px solid var(--zl-green); outline-offset: 2px; }
.zl-alt-btn[disabled] { opacity: .6; cursor: progress; }
.zl-input--code { font-size: 1.5rem; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; padding-left: .5em; }

/* Passkey list */
.zl-keys { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--zl-line); }
.zl-key { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--zl-line); }
.zl-key-name { display: block; font-weight: 600; }
.zl-key-meta { display: block; font-size: .8125rem; color: var(--zl-muted); }
.zl-key-remove { border: 0; background: none; color: var(--zl-error); font: 500 .875rem var(--zl-sans); cursor: pointer; padding: 8px; border-radius: 8px; }
.zl-key-remove:hover { background: var(--zl-error-bg); }
.zl-empty { color: var(--zl-muted); margin: 0 0 20px; }

/* New-login note */
.zl-new {
  display: flex; align-items: flex-start; gap: 10px;
  margin: -12px 0 24px; padding: 12px 14px;
  background: #EEF8FB; border: 1px solid var(--zl-line); border-radius: 10px;
  font-size: .875rem; color: var(--zl-ink);
}
.zl-new p { margin: 0; }
.zl-new .zl-link { white-space: nowrap; }
.zl-new-tag {
  flex: none; margin-top: 1px; padding: 2px 8px; border-radius: 999px;
  background: var(--zl-link); color: #fff;
  font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

/* Password reset: live requirement checklist */
.zl-rules {
  list-style: none; margin: -6px 0 18px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  font-size: .8125rem; color: var(--zl-muted);
}
.zl-rules li, .zl-match { position: relative; padding-left: 20px; }
.zl-rules li::before, .zl-match.is-met::before, .zl-match.is-off::before {
  content: ""; position: absolute; left: 2px; top: .45em;
  width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #B9C7CD;
}
.zl-rules li.is-met { color: var(--zl-ok); }
.zl-rules li.is-met::before, .zl-match.is-met::before {
  border-color: var(--zl-ok); background: var(--zl-ok);
  box-shadow: inset 0 0 0 2px #fff;
}
.zl-match { margin: 6px 0 0; min-height: 1.2em; font-size: .8125rem; padding-left: 0; }
.zl-match.is-met, .zl-match.is-off { padding-left: 20px; }
.zl-match.is-met { color: var(--zl-ok); }
.zl-match.is-off { color: var(--zl-muted); }
@media (max-width: 420px) { .zl-rules { grid-template-columns: 1fr; } }