/* Staff login front door. Master copy: /_shared/staff-login.css. Colors come from each bar's theme.css. */
.sl-overlay {
  position: fixed; inset: 0; z-index: 10000; display: none;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, 0.72);
}
.sl-overlay.sl-open { display: flex; }
body.sl-lock { overflow: hidden; }
.sl-card {
  position: relative; width: 100%; max-width: 380px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--card-bg, #fff); color: var(--card-text, #222);
  border-radius: 14px; padding: 26px 22px 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  font-family: var(--font-body, Arial, sans-serif); font-size: calc(16px * var(--sl-scale, 1));
  text-align: center;
}
.sl-close {
  position: absolute; top: 6px; right: 10px; border: 0; background: none; font-size: 30px; line-height: 1;
  color: var(--muted, #777); cursor: pointer; padding: 4px 8px;
}
.sl-logo { max-width: 110px; max-height: 80px; object-fit: contain; margin: 0 auto 6px; display: block; }
.sl-title { font-family: var(--font-display, inherit); color: var(--heading, #333); margin: 4px 0 14px; font-size: 1.5em; letter-spacing: 0.02em; }
.sl-step { display: flex; flex-direction: column; gap: 12px; }
.sl-step[hidden] { display: none; }
.sl-big {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 64px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent, #c86b0e); color: var(--accent-text, #fff);
  font: inherit; font-size: 1.15em; font-weight: 700;
}
.sl-big span { font-size: 1.3em; }
.sl-big.sl-alt { background: transparent; color: var(--heading, #333); border: 2px solid var(--input-border, #ccc); }
.sl-label { text-align: left; font-weight: 700; color: var(--heading, #333); }
.sl-input {
  width: 100%; box-sizing: border-box; padding: 14px; border-radius: 10px;
  border: 2px solid var(--input-border, #ccc); background: var(--input-bg, #fff); color: var(--input-text, #222);
  font: inherit; font-size: 1.25em; text-align: center; letter-spacing: 0.04em;
}
.sl-input:focus { outline: none; border-color: var(--accent, #c86b0e); }
.sl-code { font-size: 1.8em; letter-spacing: 0.35em; font-variant-numeric: tabular-nums; }
.sl-btn {
  display: block; width: 100%; box-sizing: border-box; min-height: 52px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--accent, #c86b0e); color: var(--accent-text, #fff);
  font: inherit; font-size: 1.1em; font-weight: 700; padding: 14px; text-decoration: none;
}
.sl-btn:hover { background: var(--accent-hover, var(--accent, #c86b0e)); }
.sl-btn:disabled { opacity: 0.6; cursor: wait; }
.sl-link { background: none; border: 0; color: var(--link, #555); font: inherit; text-decoration: underline; cursor: pointer; padding: 8px; }
.sl-email { margin-top: 14px; font-size: 0.85em; opacity: 0.8; }
.sl-email[hidden] { display: none; }
.sl-note { margin: 0; color: var(--muted, #666); font-size: 0.9em; }
.sl-welcome { font-size: 1.3em; font-weight: 700; color: var(--heading, #333); margin: 4px 0; }
.sl-a2hs { background: var(--warn-bg, #fff0c2); color: var(--warn-text, #7a4a00); border-radius: 10px; padding: 12px; font-size: 0.92em; text-align: left; }
.sl-a2hs[hidden] { display: none; }
.sl-msg { border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; text-align: left; font-size: 0.95em; }
.sl-msg.sl-bad { background: var(--bad-bg, #f8d7d3); color: var(--bad-text, #a3221a); }
.sl-msg[hidden] { display: none; }
#slRecaptcha { height: 0; }