/* QueueMe formal logo system — approved Direction A.
   This file only styles static brand areas; it does not alter application controls or flows. */
.qm-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

.qm-logo--public { height: 40px; }
.qm-logo--customer { height: 32px; }
.qm-logo--merchant { height: 30px; }
.qm-logo--admin-sidebar { height: 32px; max-width: 188px; }
.qm-logo--login-mark { width: 56px; height: 56px; margin: 0 auto 12px; }
.qm-logo--login-lockup { height: 33px; margin: 0 auto 10px; }
.qm-logo--display { height: 22px; }

/* Replaces the previous CSS-drawn dots without changing the surrounding header layout. */
.logo.qm-logo-slot { line-height: 0; }
.logo.qm-logo-slot::before { display: none; }

.qm-brand-context {
  color: var(--muted, #65788b);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

.qm-brand-variant { display: inline-flex; align-items: center; min-width: 0; }
.qm-brand-variant--login { display: flex; justify-content: center; }
.qm-brand-variant--login .qm-logo--login-lockup { margin: 0 0 10px; }
.qm-brand-variant .qm-logo--dark { display: none; }
.dark .qm-brand-variant .qm-logo--light { display: none; }
.dark .qm-brand-variant .qm-logo--dark { display: block; }

.qm-powered-by {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qm-brand-a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .qm-logo--public { height: 32px; }
  .qm-logo--customer { height: 29px; }
  .qm-logo--merchant { height: 28px; }
  .qm-brand-context { display: none; }
}