/* =====================================================================
   Queue Display Board v2 — reference-matched professional call board.
   Scoped entirely to .qd-rebuild so it never leaks to other templates.
   Light identity: white cards, navy header/footer, teal/blue/purple.
   Layout: header / stat row / 3 columns (waiting | calls+media+qr | recent) / footer.
   Direction-agnostic: uses CSS logical properties; ticket numbers stay LTR via <bdi>.
   ===================================================================== */

.qd-rebuild {
  --qb-navy-1: #0b2545;
  --qb-navy-2: #14385f;
  --qb-navy-3: #1c4a7a;
  --qb-teal: #0fb5ad;
  --qb-teal-ink: #0a7a74;
  --qb-blue: #2563eb;
  --qb-purple: #7c3aed;
  --qb-bg: #eef2f7;
  --qb-card: #ffffff;
  --qb-card-2: #f7fafc;
  --qb-line: #e4eaf2;
  --qb-line-strong: #d4deea;
  --qb-ink: #102441;
  --qb-ink-soft: #33425a;
  --qb-muted: #6c7c93;
  --qb-radius-lg: clamp(14px, 1.1vw, 22px);
  --qb-radius: clamp(10px, 0.8vw, 16px);
  --qb-radius-sm: 10px;
  --qb-gap: clamp(9px, 0.85vw, 18px);
  --qb-pad: clamp(10px, 0.9vw, 18px);
  --qb-shadow: 0 12px 30px rgba(16, 36, 65, .08);
  --qb-shadow-soft: 0 6px 16px rgba(16, 36, 65, .06);
  --qb-shadow-card: 0 14px 34px rgba(16, 36, 65, .12);
}

/* ---------- shell ---------- */
.qd-rebuild.display-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.9vh, 16px);
  padding: clamp(8px, 0.9vw, 18px);
  background: var(--qb-bg);
  color: var(--qb-ink);
  overflow: hidden;
  isolation: isolate;
}
.qd-rebuild .qb {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.9vh, 16px);
}
.qd-rebuild [hidden] { display: none !important; }
.qd-rebuild .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- header ---------- */
.qd-rebuild .qb-header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 1.4vw, 28px);
  padding-inline: clamp(14px, 1.6vw, 30px);
  padding-block: clamp(8px, 1vh, 16px);
  min-height: clamp(58px, 7.4vh, 96px);
  border-radius: var(--qb-radius-lg);
  background: linear-gradient(120deg, var(--qb-navy-1) 0%, var(--qb-navy-2) 60%, var(--qb-navy-3) 100%);
  color: #eaf2fb;
  box-shadow: var(--qb-shadow);
  overflow: hidden;
}
.qd-rebuild .qb-header__side { display: flex; align-items: center; min-width: 0; }
.qd-rebuild .qb-header__side--identity {
  justify-content: flex-start;
  flex-direction: row;
  gap: clamp(10px, 0.9vw, 18px);
  order: 1; /* first grid column = inline-start (right in RTL, left in LTR) */
  text-align: end;
}
.qd-rebuild .qb-header__side--status {
  order: 3; /* third grid column = inline-end (left in RTL, right in LTR) */
  justify-content: flex-end;
  gap: clamp(8px, 0.8vw, 16px);
}

.qd-rebuild .qb-header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(40px, 3.6vw, 64px);
  block-size: clamp(40px, 3.6vw, 64px);
  border-radius: 14px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  flex: 0 0 auto;
}
.qd-rebuild .qb-header__logo :is(img, svg) { max-inline-size: 72%; max-block-size: 72%; object-fit: contain; }
.qd-rebuild .qb-header__identity-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qd-rebuild .qb-header__facility {
  font-size: clamp(16px, 1.55vw, 28px);
  font-weight: 800;
  line-height: 1.45;
  padding-bottom: 4px;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qd-rebuild .qb-header__subtitle {
  font-size: clamp(11px, 0.95vw, 16px);
  font-weight: 700;
  line-height: 1.4;
  padding-bottom: 2px;
  color: var(--qb-teal);
  letter-spacing: .2px;
}
.qd-rebuild .qb-header__location { font-size: clamp(10px, 0.8vw, 13px); color: rgba(234, 242, 251, .65); }

.qd-rebuild .qb-header__clock-icon { color: rgba(234, 242, 251, .7); display: inline-flex; }
.qd-rebuild .qb-header__time {
  font-size: clamp(20px, 2.3vw, 40px);
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.qd-rebuild .qb-header__date-stack { display: flex; flex-direction: column; gap: 1px; text-align: start; }
.qd-rebuild .qb-header__date { font-size: clamp(10px, 0.9vw, 15px); color: rgba(234, 242, 251, .82); white-space: nowrap; }

.qd-rebuild .qb-header__live { display: flex; flex-direction: column; gap: 2px; }
.qd-rebuild .qb-header__live-row { display: inline-flex; align-items: center; gap: 7px; }
.qd-rebuild .qb-header__live-dot {
  inline-size: 10px; block-size: 10px; border-radius: 50%;
  background: #f59e0b; /* default: not yet confirmed live */
}
.qd-rebuild .qb-header__live-dot.is-live {
  background: #29d39a; box-shadow: 0 0 0 0 rgba(41, 211, 154, .55);
  animation: qb-pulse 2.2s ease-out infinite;
}
.qd-rebuild .qb-header__live-label { font-size: clamp(12px, 1.05vw, 17px); font-weight: 700; color: #d7f7ec; }
.qd-rebuild .qb-header__live-sub { font-size: clamp(9px, 0.78vw, 12px); color: rgba(234, 242, 251, .6); }
.qd-rebuild .qb-header__controls { display: inline-flex; gap: 6px; margin-inline-start: 4px; }
.qd-rebuild .qb-header__btn {
  inline-size: clamp(30px, 2.4vw, 40px); block-size: clamp(30px, 2.4vw, 40px);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; cursor: pointer; color: #cfe0f2;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  transition: background .2s, color .2s;
}
.qd-rebuild .qb-header__btn:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.qd-rebuild .qb-header__btn.display-btn--active { background: var(--qb-teal); color: #042b29; border-color: transparent; }

@keyframes qb-pulse {
  0% { box-shadow: 0 0 0 0 rgba(41, 211, 154, .5); }
  70% { box-shadow: 0 0 0 9px rgba(41, 211, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(41, 211, 154, 0); }
}

.qd-rebuild .qb-sound-hint {
  position: absolute;
  inset-block-end: clamp(72px, 9vh, 110px);
  inset-inline: 0;
  margin-inline: auto;
  inline-size: max-content; max-inline-size: 80%;
  z-index: 30;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(15, 181, 173, .96);
  color: #042b29;
  font-size: 13px; font-weight: 700;
  box-shadow: var(--qb-shadow-card);
}

.qd-rebuild .qb-demo-simulation-banner {
  position: absolute;
  inset-block-end: clamp(118px, 14vh, 156px);
  inset-inline: 0;
  margin-inline: auto;
  inline-size: max-content;
  max-inline-size: min(92vw, 720px);
  z-index: 30;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(217, 150, 20, .96);
  color: #2a1d00;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  box-shadow: var(--qb-shadow-card);
}

/* ---------- stats row ---------- */
.qd-rebuild .qb-stats {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--qb-gap);
}
.qd-rebuild .qb-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 0.6vw, 10px);
  padding: clamp(5px, 0.55vh, 8px) clamp(8px, 1vw, 16px);
  background: var(--qb-card);
  border: 1px solid var(--qb-line);
  border-radius: var(--qb-radius-lg);
  box-shadow: var(--qb-shadow-soft);
  min-height: clamp(48px, 5.5vh, 64px);
  max-height: clamp(52px, 6.8vh, 68px);
  position: relative;
  overflow: hidden;
}
.qd-rebuild .qb-stat::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 5px; background: var(--qb-blue); opacity: .9;
}
.qd-rebuild .qb-stat--avg::before { background: var(--qb-blue); }
.qd-rebuild .qb-stat--today::before { background: var(--qb-teal); }
.qd-rebuild .qb-stat--serving::before { background: #0ea5e9; }
.qd-rebuild .qb-stat--waiting::before { background: var(--qb-purple); }
.qd-rebuild .qb-stat__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qd-rebuild .qb-stat__label { font-size: clamp(10px, 0.82vw, 13px); font-weight: 600; color: var(--qb-muted); line-height: 1.2; }
.qd-rebuild .qb-stat__value-row { display: inline-flex; align-items: baseline; gap: 4px; }
.qd-rebuild .qb-stat__value {
  font-size: clamp(20px, min(2vw, 3.2vh), 34px);
  font-weight: 800; line-height: 1; color: var(--qb-ink);
  font-variant-numeric: tabular-nums;
}
.qd-rebuild .qb-stat__unit { font-size: clamp(9px, 0.78vw, 12px); font-weight: 600; color: var(--qb-muted); }
.qd-rebuild .qb-stat__icon {
  flex: 0 0 auto;
  inline-size: clamp(30px, min(2.8vw, 4.5vh), 40px); block-size: clamp(30px, min(2.8vw, 4.5vh), 40px);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--qb-blue);
  background: color-mix(in srgb, var(--qb-blue) 12%, #fff);
}
.qd-rebuild .qb-stat__icon svg {
  inline-size: clamp(14px, 1.2vw, 18px);
  block-size: clamp(14px, 1.2vw, 18px);
}
.qd-rebuild .qb-stat--today .qb-stat__icon { color: var(--qb-teal-ink); background: color-mix(in srgb, var(--qb-teal) 14%, #fff); }
.qd-rebuild .qb-stat--serving .qb-stat__icon { color: #0369a1; background: color-mix(in srgb, #0ea5e9 14%, #fff); }
.qd-rebuild .qb-stat--waiting .qb-stat__icon { color: var(--qb-purple); background: color-mix(in srgb, var(--qb-purple) 13%, #fff); }

/* ---------- grid ---------- */
.qd-rebuild .qb__grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 2.35fr) minmax(0, 1.12fr);
  gap: var(--qb-gap);
}
.qd-rebuild .qb__col { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.qd-rebuild .qb__col--center {
  display: grid;
  /* Match height with compact layout hero card */
  grid-template-rows: clamp(220px, 32vh, 280px) minmax(0, 1fr);
  gap: var(--qb-gap);
  overflow: hidden;
}

/* card shell shared by side panels */
.qd-rebuild .qb-recent,
.qd-rebuild .qb-wait {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--qb-card);
  border: 1px solid var(--qb-line);
  border-radius: var(--qb-radius-lg);
  box-shadow: var(--qb-shadow-soft);
  overflow: hidden;
  --qb-wait-cols: minmax(64px, 0.78fr) minmax(0, 1.32fr) minmax(104px, 1.05fr);
}
.qd-rebuild .qb-recent__head,
.qd-rebuild .qb-wait__head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: clamp(10px, 1vw, 18px) clamp(12px, 1.1vw, 20px);
  border-block-end: 1px solid var(--qb-line);
  background: var(--qb-card-2);
}
.qd-rebuild .qb-recent__title-wrap,
.qd-rebuild .qb-wait__title-wrap { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.qd-rebuild .qb-recent__icon,
.qd-rebuild .qb-wait__icon {
  inline-size: clamp(30px, 2.4vw, 40px); block-size: clamp(30px, 2.4vw, 40px);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; color: var(--qb-teal-ink);
  background: color-mix(in srgb, var(--qb-teal) 13%, #fff);
}
.qd-rebuild .qb-wait__icon { color: var(--qb-blue); background: color-mix(in srgb, var(--qb-blue) 12%, #fff); }
.qd-rebuild .qb-recent__title,
.qd-rebuild .qb-wait__title {
  font-size: clamp(14px, 1.25vw, 22px); font-weight: 800; color: var(--qb-ink); margin: 0;
}
.qd-rebuild .qb-wait__count-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.qd-rebuild .qb-wait__hint { display: none; }

.qd-rebuild .qb-recent__body,
.qd-rebuild .qb-wait__body { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: hidden; padding: clamp(6px, 0.6vw, 12px); }

/* ---------- recent calls — styled in compact feed block at end of file ---------- */

/* ---------- center: now calling ---------- */
.qd-rebuild .qb__now-wrap {
  min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: clamp(6px, 0.7vh, 12px);
  background: var(--qb-card);
  border: 1px solid var(--qb-line);
  border-radius: var(--qb-radius-lg);
  box-shadow: var(--qb-shadow-soft);
  padding: clamp(10px, 1vw, 20px);
}
.qd-rebuild .qb__now-title {
  flex: 0 0 auto;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: clamp(12px, 1.05vw, 20px);
  font-weight: 800;
  color: #fff;
}
.qd-rebuild .qb__now-title-icon { display: inline-flex; color: var(--qb-teal); }

.qd-rebuild .qb__now {
  flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  gap: clamp(10px, 1vw, 20px);
}

/* main hero card — layout only; visual surface overridden in containment block */
.qd-rebuild .qb__now #now-serving-card {
  order: 1;
  flex: 1 1 auto;
  min-height: 0;
  min-inline-size: 0;
  max-inline-size: 100%;
  inline-size: 100%;
  max-block-size: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(4px, 0.7vh, 12px);
  position: relative;
  padding: clamp(10px, 1.3vw, 26px) clamp(16px, 2vw, 40px);
  border-radius: var(--qb-radius-lg);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.qd-rebuild .qb__now.qd-pro__now--multi #now-serving-card { max-inline-size: 100%; }
/* hide the phase badge when there is no active call */
.qd-rebuild .qb__now-wrap:has(#now-ticket-active-group[hidden]) > .qb__now-phase-badge,
.qd-rebuild .qb__now-wrap:has(#now-ticket-active-group[hidden]) > #now-ticket-phase-badge,
.qd-rebuild .qb__now-wrap:has(#now-ticket-active-group[hidden]) > .qb__now-title { display: none !important; }
.qd-rebuild .qd-now__active {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.6vh, 10px);
  inline-size: 100%;
  direction: inherit;
}
.qd-rebuild .qd-now__hero-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 28px);
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}
.qd-rebuild .qb__now .qd-now__number,
.qd-rebuild .qb__now #now-ticket-number {
  font-size: clamp(40px, 5.6vw, 116px);
  font-weight: 900;
  line-height: 1.08;
  color: var(--qb-teal-ink);
  letter-spacing: 0.02px;
  font-variant-numeric: tabular-nums;
  max-inline-size: 100%;
  white-space: nowrap;
  overflow: visible;
}
.qd-rebuild .qb__now .qd-now__service,
.qd-rebuild .qb__now #now-ticket-service {
  direction: inherit;
  unicode-bidi: plaintext;
  font-size: clamp(16px, 1.8vw, 34px); font-weight: 800; color: var(--qb-ink); text-align: start;
  margin: 0;
  align-self: stretch;
  line-height: 1.25;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}
.qd-rebuild .qb__now .qd-now__cta,
.qd-rebuild .qb__now #now-ticket-destination {
  direction: inherit;
  unicode-bidi: plaintext;
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.35em;
  align-self: stretch;
  font-size: clamp(13px, 1.15vw, 20px); font-weight: 700; color: #0a5a8a;
  background: color-mix(in srgb, var(--qb-blue) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--qb-blue) 22%, #fff);
  padding: clamp(7px, 0.8vh, 11px) clamp(12px, 1.2vw, 18px);
  border-radius: 12px;
  text-align: start;
  max-inline-size: 100%;
  white-space: normal;
  line-height: 1.35;
}
.qd-rebuild .qb__now .qd-now__counter { display: none; }
.qd-rebuild .qb__now .qd-now__idle { color: var(--qb-muted); font-size: clamp(16px, 1.6vw, 30px); font-weight: 700; text-align: center; }
.qd-rebuild .qb__now .qd-now__priority {
  margin: 0; font-size: clamp(11px, 0.9vw, 15px); font-weight: 700;
  color: #fff; background: var(--qb-purple); padding: 3px 12px; border-radius: 999px;
}
.qd-rebuild .qb__now #now-serving-card.qd-now--reminder { border-color: transparent; box-shadow: none; }
.qd-rebuild .qb__now #now-serving-card.qd-now--final { border-color: transparent; box-shadow: none; }

/* centre rail: simultaneous calls only — recent history lives in sidebar */
.qd-rebuild .qb__now .calls-cascade-board {
  display: flex !important;
}

/* ---------- feature row: QR + media ---------- */
.qd-rebuild .qb__feature {
  min-height: 0;
  max-height: 100%;
  display: grid;
  grid-template-columns: minmax(138px, .4fr) minmax(0, 2.0fr);
  gap: var(--qb-gap);
  align-items: stretch;
  overflow: hidden;
}
/* media disabled -> QR only, centered */
.qd-rebuild .qb__feature:has(#display-media-zone[hidden]) { grid-template-columns: minmax(0, clamp(260px, 26vw, 420px)); justify-content: center; }
/* QR disabled -> media only */
.qd-rebuild.queue-display--no-qr .qb__feature { grid-template-columns: minmax(0, 1fr); }
/* both off -> hide row */
.qd-rebuild.queue-display--no-qr .qb__feature:has(#display-media-zone[hidden]) { display: none; }

/* media zone: strict 16:9, white letterbox, centered contain */
.qd-rebuild .qb__media { min-width: 0; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #fff; }
.qd-rebuild .queue-media {
  position: relative;
  block-size: 100%;
  inline-size: 100%;
  max-inline-size: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}
.qd-rebuild .queue-media__frame,
.qd-rebuild .media-stage {
  position: relative;
  block-size: min(100%, calc((100vw - 320px) / 1.7778));
  inline-size: auto;
  aspect-ratio: 16 / 9;
  max-inline-size: 100%;
  max-block-size: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--qb-line);
  border-radius: var(--qb-radius-lg);
  box-shadow: var(--qb-shadow-soft);
}
.qd-rebuild .queue-media__shell,
.qd-rebuild .media-player-shell {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  min-width: 0;
  min-height: 0;
  background: #fff;
}
.qd-rebuild .queue-media__shell .queue-media__asset:is(img, video),
.qd-rebuild .media-player-shell :is(img, video),
.qd-rebuild .queue-media__frame :is(img, video) {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
  object-position: center;
  border: 0;
  display: block;
  background: #fff;
  box-shadow:
    0 8px 28px rgba(16, 36, 65, 0.07),
    0 0 0 1px rgba(16, 36, 65, 0.05);
}
.qd-rebuild .queue-media__shell .queue-media__asset:is(iframe),
.qd-rebuild .media-player-shell iframe,
.qd-rebuild .queue-media__frame iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
  background: #fff;
}
.qd-rebuild .media-player-shell--veil {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.qd-rebuild .media-stage--veil,
.qd-rebuild .queue-media__frame:has(.media-player-shell--veil) {
  overflow: hidden;
  background: #fff;
}
.qd-rebuild .media-player-shell--veil .queue-media__asset {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  background: #fff;
  box-shadow: none;
}
.qd-rebuild .media-player-shell__veil {
  position: absolute;
  z-index: 2;
  background: var(--qb-card, #fff);
  pointer-events: none;
  box-shadow: 0 0 0 1px var(--qb-card, #fff);
}
.qd-rebuild .media-player-shell__veil--side {
  inset-block: 0;
  inline-size: var(--veil-size, 12.5%);
}
.qd-rebuild .media-player-shell__veil--start {
  inset-inline-start: 0;
}
.qd-rebuild .media-player-shell__veil--end {
  inset-inline-end: 0;
}
.qd-rebuild .media-player-shell__veil--bar {
  inset-inline: 0;
  block-size: var(--veil-size, 12.5%);
}
.qd-rebuild .media-player-shell__veil--top {
  inset-block-start: 0;
}
.qd-rebuild .media-player-shell__veil--bottom {
  inset-block-end: 0;
}
.qd-rebuild .queue-media__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  color: var(--qb-muted);
  font-size: clamp(12px, 1vw, 16px);
  background: #fff;
}
.qd-rebuild .queue-media__indicators {
  position: absolute;
  inset-block-end: 8px;
  inset-inline: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
}
.qd-rebuild .queue-media__indicators > * {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 999px;
  background: rgba(16, 36, 65, .22);
}
.qd-rebuild .queue-media__indicators > .is-active { background: var(--qb-teal); inline-size: 18px; }

/* QR card */
.qd-rebuild .qb__qr-stage { min-width: 0; display: flex; }
.qd-rebuild .qb-qr {
  inline-size: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: flex; flex-direction: column; gap: clamp(6px, 0.7vh, 12px);
  padding: clamp(10px, 1vw, 20px);
  background: var(--qb-card);
  border: 1px solid var(--qb-line);
  border-radius: var(--qb-radius-lg);
  box-shadow: var(--qb-shadow-soft);
  text-align: center;
  align-items: center;
  justify-content: center;
}
.qd-rebuild .qb-qr__code {
  position: relative;
  inline-size: clamp(76px, min(8vw, 14vh), 150px);
  block-size: clamp(76px, min(8vw, 14vh), 150px);
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--qb-line); border-radius: 14px; padding: 8px;
}
.qd-rebuild .qb-qr__code .join-qr-host { inline-size: 100%; block-size: 100%; }
.qd-rebuild .qb-qr__code .join-qr-host :is(canvas, img) { inline-size: 100% !important; block-size: 100% !important; object-fit: contain; }
.qd-rebuild .qb-qr__code .qr-placeholder { font-size: 11px; color: var(--qb-muted); }
/* ---------- waiting list — styled in compact feed block at end of file ---------- */

/* ---------- footer ---------- */
.qd-rebuild .qb-footer {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: center;
  gap: clamp(10px, 1.4vw, 28px);
  padding: clamp(8px, 1vh, 16px) clamp(16px, 1.8vw, 32px);
  min-height: clamp(48px, 6.2vh, 78px);
  border-radius: var(--qb-radius-lg);
  background: linear-gradient(120deg, var(--qb-navy-1), var(--qb-navy-2));
  color: #dbe7f4;
  box-shadow: var(--qb-shadow);
}
.qd-rebuild .qb-footer__zone { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.qd-rebuild .qb-footer__zone--care { justify-content: flex-end; order: 3; text-align: end; }
.qd-rebuild .qb-footer__zone--notice { justify-content: center; order: 2; text-align: center; border-inline: 1px solid rgba(255,255,255,.12); padding-inline: clamp(10px,1.3vw,26px); flex: 1 1 auto; min-width: 0; }
.qd-rebuild .qb-footer__zone--hours { justify-content: flex-start; order: 1; }
.qd-rebuild .qb-footer__icon {
  flex: 0 0 auto;
  inline-size: clamp(30px, 2.6vw, 42px); block-size: clamp(30px, 2.6vw, 42px);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; color: #9fe9df; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
}
.qd-rebuild .qb-footer__copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qd-rebuild .qb-footer__title { font-size: clamp(12px, 1.05vw, 17px); font-weight: 700; color: #fff; }
.qd-rebuild .qb-footer__text { font-size: clamp(10px, 0.85vw, 14px); color: rgba(219,231,244,.72); }
.qd-rebuild .qb-footer__ticker {
  font-size: clamp(11px, 0.95vw, 16px);
  font-weight: 700;
  color: rgba(255,255,255,.88);
  line-height: 1.45;
  text-align: center;
  max-width: 100%;
}
.qd-rebuild .qb-footer__notice-copy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; flex: 1 1 auto; }
.qd-rebuild .qb-footer__live,
.qd-rebuild .qb-footer__announcement {
  font-size: clamp(12px, 1.05vw, 18px);
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.qd-rebuild .qb-footer__reconnect { font-size: clamp(11px, 0.9vw, 14px); color: #fbbf24; font-weight: 700; }

/* ===========================================================
   LARGE SCREENS / 2K / 4K  (>= 2000px CSS px)
   Lifts the clamp() caps so content scales up with the canvas
   instead of looking small with big empty gaps. 1920 reference
   is < 2000px so it stays pixel-identical.
   =========================================================== */
@media (min-width: 2000px) {
  .qd-rebuild {
    --qb-gap: clamp(14px, 0.85vw, 30px);
    --qb-pad: clamp(14px, 0.9vw, 26px);
    --qb-radius-lg: clamp(18px, 1.1vw, 34px);
    --qb-radius: clamp(14px, 0.8vw, 24px);
    --qb-fs-hero-service: clamp(2rem, min(3.2vw, 5vh), 4.5rem);
    --qb-fs-hero-cta: clamp(1.5rem, min(2.4vw, 3.5vh), 3rem);
    --qb-fs-list-num: clamp(1.45rem, 2.2vw, 2.7rem);
    --qb-fs-list-service: clamp(1.1rem, 1.55vw, 2rem);
    --qb-fs-list-meta: clamp(1rem, 1.25vw, 1.6rem);
    --qb-fs-panel-title: clamp(1.2rem, 1.5vw, 1.85rem);
    --qb-fs-col-header: clamp(1rem, 1.15vw, 1.35rem);
    --qb-fs-stat-label: clamp(1.05rem, 1.3vw, 1.65rem);
    --qb-fs-stat-unit: clamp(1rem, 1.2vw, 1.5rem);
    --qb-fs-ui: clamp(0.95rem, 1.15vw, 1.45rem);
  }
  .qd-rebuild .qb-header { min-height: clamp(80px, 7.4vh, 150px); }
  .qd-rebuild .qb-header__facility { font-size: clamp(28px, 1.55vw, 60px); }
  .qd-rebuild .qb-header__subtitle { font-size: clamp(14px, 0.95vw, 26px); }
  .qd-rebuild .qb-header__time { font-size: clamp(40px, 2.3vw, 90px); }
  .qd-rebuild .qb-header__date { font-size: clamp(13px, 0.9vw, 24px); }
  .qd-rebuild .qb-header__logo { inline-size: clamp(56px, 3.6vw, 104px); block-size: clamp(56px, 3.6vw, 104px); }

  .qd-rebuild .qb-stat {
    min-height: clamp(52px, 5.5vh, 68px);
    max-height: clamp(56px, 6vh, 72px);
  }
  .qd-rebuild .qb-stat__value { font-size: clamp(24px, min(1.8vw, 3vh), 38px); }
  .qd-rebuild .qb-stat__icon { inline-size: clamp(34px, 2.4vw, 44px); block-size: clamp(34px, 2.4vw, 44px); }

  .qd-rebuild .qb__now-wrap > .qb__now-title,
  .qd-rebuild .qb__now-title { font-size: clamp(13px, 0.85vw, 22px); }
  /* min(vw, vh) so wide-but-short screens (ultrawide) don't over-scale and clip */
  .qd-rebuild .qb__now #now-ticket-number,
  .qd-rebuild .qb__now .qd-now__number { font-size: clamp(93px, min(4.48vw, 8vh), 224px); }
  .qd-rebuild .qb-qr__code {
    inline-size: clamp(168px, min(12vw, 18vh), 312px);
    block-size: clamp(168px, min(12vw, 18vh), 312px);
  }

  .qd-rebuild .qb__feature:has(#display-media-zone[hidden]) .qb-qr__code {
    inline-size: clamp(180px, min(14vh, 16vw), 320px);
    block-size: clamp(180px, min(14vh, 16vw), 320px);
  }

  .qd-rebuild .qb-footer { min-height: clamp(72px, 6.2vh, 120px); }

}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
/* shorter / smaller screens: tighten stat row & hero */
@media (max-height: 760px) {
  .qd-rebuild .qb-stat { min-height: 46px; max-height: 52px; }
  .qd-rebuild .qb-stats { max-height: 52px; }
  .qd-rebuild .qb__now #now-ticket-number { font-size: clamp(40px, 6vw, 90px); }
}

/* narrow screens (<= 1180px): drop recent column, keep waiting + calls */
@media (max-width: 1180px) {
  .qd-rebuild .qb__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); }
  .qd-rebuild .qb__col--recent { display: none; }
  .qd-rebuild .qb-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* very narrow (<= 880px): single center stack */
@media (max-width: 880px) {
  .qd-rebuild .qb__grid { grid-template-columns: minmax(0, 1fr); }
  .qd-rebuild .qb__col--waiting { display: none; }
  .qd-rebuild .qb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qd-rebuild .qb-header { grid-template-columns: 1fr auto; }
  .qd-rebuild .qb-header__side--status { display: none; }
}

/* ultrawide: cap content width nicely */
@media (min-aspect-ratio: 24/9) {
  .qd-rebuild .qb__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr) minmax(0, 1fr); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .qd-rebuild .qb-header__live-dot,
  .qd-rebuild .qb__now .calls-cascade-board__cell--enter,
  .qd-rebuild .qb-wait .qd-next-card--entering,
  .qd-rebuild .qb-wait__pager .qd-next__pager-progress-bar.is-running {
    animation: none !important;
    transform: scaleX(1) !important;
  }
}

/* =====================================================================
   Unified Display Layout — final production surface.
   ===================================================================== */
.qd-rebuild {
  --qb-navy-1: #061937;
  --qb-navy-2: #082247;
  --qb-teal: #0aa3a5;
  --qb-teal-ink: #067c83;
  --qb-purple: #6f45c8;
  --qb-recall: #6D4BC3;
  --qb-recall-bg: #F2EEFF;
  --qb-recall-ink: #5a3daf;
  --qb-final-call: #d99614;
  --qb-bg: #f4f7fb;
  --qb-card: #ffffff;
  --qb-card-2: #f8fafc;
  --qb-line: #dde6f0;
  --qb-line-strong: #cfd9e7;
  --qb-ink: #071a3d;
  --qb-ink-soft: #263a59;
  --qb-muted: #687792;
  --qb-gap: clamp(7px, 0.75vw, 16px);
  --qb-radius-lg: clamp(9px, 0.75vw, 16px);
  --qb-radius: clamp(8px, 0.65vw, 12px);
  font-family: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* TV reading scale — tuned for 55–75" screens at 3–6 m */
  --qb-fs-hero-service: clamp(1.8rem, min(3vw, 4.5vh), 4rem);
  --qb-fs-hero-cta: clamp(1.35rem, min(2.2vw, 3.2vh), 2.75rem);
  --qb-fs-list-num: clamp(1.3rem, 2vw, 2.4rem);
  --qb-fs-list-service: clamp(1rem, 1.45vw, 1.8rem);
  --qb-fs-list-meta: clamp(0.9rem, 1.15vw, 1.45rem);
  --qb-fs-panel-title: clamp(1.05rem, 1.35vw, 1.65rem);
  --qb-fs-col-header: clamp(0.88rem, 1.08vw, 1.25rem);
  --qb-fs-stat-label: clamp(0.95rem, 1.2vw, 1.5rem);
  --qb-fs-stat-unit: clamp(0.9rem, 1.1vw, 1.35rem);
  --qb-fs-ui: clamp(0.85rem, 1.1vw, 1.35rem);
}

.qd-rebuild.display-shell {
  padding: 0;
  gap: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(10, 163, 165, .055), transparent 35%),
    linear-gradient(180deg, #f9fbfe 0%, #eef3f8 100%);
}

.qd-rebuild .qb {
  padding: clamp(8px, 0.9vw, 18px) clamp(10px, 1.2vw, 24px) 0;
  gap: var(--qb-gap);
}

.qd-rebuild .qb-header,
.qd-rebuild .qb-footer {
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(90deg, var(--qb-navy-1) 0%, var(--qb-navy-2) 100%);
}

.qd-rebuild .qb-header {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.55fr);
  min-height: clamp(42px, 5.5vh, 64px);
  padding: clamp(3px, 0.4vh, 7px) clamp(12px, 1.2vw, 26px);
  gap: clamp(10px, 1.2vw, 24px);
}

.qd-rebuild .qb-header__side--identity {
  order: 1;
  justify-content: flex-start;
  flex-direction: row; /* DOM: logo then text → outer edge in both RTL/LTR */
  text-align: end;
}

.qd-rebuild .qb-header__side--status {
  order: 2;
  justify-content: flex-end;
  gap: clamp(14px, 1.8vw, 42px);
  min-width: 0;
}

[dir="ltr"] .qd-rebuild .qb-header__side--identity {
  text-align: start;
}

.qd-rebuild .qb-header__logo {
  background: transparent;
  border: 0;
  inline-size: clamp(36px, 3.8vw, 58px);
  block-size: clamp(36px, 3.8vw, 58px);
}

.qd-rebuild .qb-header__logo :is(img, svg) {
  max-inline-size: 100%;
  max-block-size: 100%;
}

.qd-rebuild .qb-header__facility {
  font-size: clamp(15px, min(1.4vw, 2.4vh), 28px);
  font-weight: 800;
}

.qd-rebuild .qb-header__subtitle {
  font-size: clamp(11px, min(1vw, 1.8vh), 18px);
  color: #13c7cf;
}

.qd-rebuild .qb-header__live {
  padding-inline-end: clamp(10px, 1.2vw, 28px);
  border-inline-end: 1px solid rgba(255, 255, 255, .18);
}

.qd-rebuild .qb-header__time-wrap {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, .9vw, 18px);
  padding-inline-start: clamp(10px, 1.2vw, 28px);
  border-inline-start: 1px solid rgba(255, 255, 255, .18);
}

.qd-rebuild .qb-header__date-stack {
  text-align: start;
  max-inline-size: 24ch;
}

.qd-rebuild .qb-header__date {
  font-size: clamp(10px, min(.8vw, 1.4vh), 14px);
  white-space: normal;
}

.qd-rebuild .qb-header__time {
  font-size: clamp(18px, min(1.8vw, 3vh), 36px);
  letter-spacing: 0;
}

/* Styled under header buttons */

.qd-rebuild .qb-header__live-label {
  font-size: clamp(14px, min(1.05vw, 1.9vh), 24px);
}

.qd-rebuild .qb-header__live-sub {
  font-size: clamp(10px, min(.78vw, 1.45vh), 17px);
}

.qd-rebuild .qb-header__controls {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: clamp(4px, .55vw, 14px);
  padding: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex: 0 0 auto;
}

.qd-rebuild .qb-header__btn,
.qd-rebuild #fullscreen-btn,
.qd-rebuild .qb-header__clock-icon {
  position: relative;
  inline-size: clamp(34px, 2.3vw, 40px) !important;
  block-size: clamp(34px, 2.3vw, 40px) !important;
  min-inline-size: clamp(34px, 2.3vw, 40px) !important;
  padding: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
  color: #13c7cf !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(19, 199, 207, 0.15) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer;
  transition:
    background 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important,
    color 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important,
    border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important,
    box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important,
    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.qd-rebuild .qb-header__btn svg {
  width: 18px;
  height: 18px;
}

.qd-rebuild .qb-header__btn:hover,
.qd-rebuild #fullscreen-btn:hover {
  background: rgba(19, 199, 207, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(19, 199, 207, 0.35) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-1.5px);
}

/* Sound button needs attention when NOT active */
.qd-rebuild .qb-header__btn--sound:not(.display-btn--active) {
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #fcd34d !important;
  background: rgba(245, 158, 11, 0.12) !important;
  animation: qb-sound-btn-pulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.qd-rebuild .qb-header__btn--sound:not(.display-btn--active):hover {
  background: rgba(245, 158, 11, 0.22) !important;
}

@keyframes qb-sound-btn-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
  }
}

.qd-rebuild .qb-header__btn--sound.display-btn--active {
  background: linear-gradient(135deg, var(--qc-accent-primary, #14b8a6), var(--qc-accent-secondary, #13c7cf)) !important;
  color: #042b29 !important;
  border-color: transparent !important;
  box-shadow: 0 3px 12px rgba(20, 184, 166, 0.4) !important;
}

.qd-rebuild .qb-header__btn--sound.display-btn--active:hover {
  background: linear-gradient(135deg, #13c7cf, #14b8a6) !important;
  color: #042b29 !important;
}

.qd-rebuild .qb-header__btn--lang,
.qd-rebuild .qb-header__btn--layout {
  text-decoration: none;
}

.qd-rebuild .qb-header__lang-code,
.qd-rebuild .qb-header__layout-code {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 7.5px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  font-family: "Inter", system-ui, sans-serif;
  color: #020812 !important;
  background: var(--qc-accent-primary, #14b8a6) !important;
  border: 1px solid rgba(2, 8, 18, 0.2) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
  pointer-events: none;
}

.qd-rebuild .qb-header__btn--layout.display-btn--active {
  color: var(--qc-accent-primary) !important;
  background: rgba(20, 184, 166, 0.15) !important;
  border-color: rgba(20, 184, 166, 0.4) !important;
  box-shadow: 0 0 12px rgba(20, 184, 166, 0.2) !important;
}

.qd-rebuild .qb-header__btn:active {
  transform: translateY(0) scale(.95);
}

.qd-rebuild .qb-header__btn :is(svg, span[id$="-icon"]) {
  display: inline-flex;
}

.qd-rebuild .qb-header__btn--fullscreen {
  position: relative;
}

.qd-rebuild .qb-header__btn--fullscreen.qb-header__btn--expand-hint::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  border: 1.5px solid #020812;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
  pointer-events: none;
  animation: qb-fullscreen-hint-pulse 1.85s ease-in-out infinite;
}

@keyframes qb-fullscreen-hint-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
  }

  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qd-rebuild .qb-header__btn--fullscreen.qb-header__btn--expand-hint::after {
    animation: none;
  }
}

.qd-rebuild .qb-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  min-height: 0;
  max-height: clamp(52px, 6.8vh, 68px);
  background: var(--qb-card);
  border: 1px solid var(--qb-line);
  border-radius: var(--qb-radius-lg);
  overflow: hidden;
}

.qd-rebuild .qb-stat {
  min-height: 0;
  height: 100%;
  padding: clamp(5px, 0.55vh, 8px) clamp(8px, 1vw, 18px);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  justify-content: center;
  flex-direction: row-reverse;
  gap: clamp(6px, 0.6vw, 10px);
}

.qd-rebuild .qb-stat:not(:last-child) {
  border-inline-start: 1px solid var(--qb-line-strong);
}

[dir="ltr"] .qd-rebuild .qb-stat:not(:last-child) {
  border-inline-start: 0;
  border-inline-end: 1px solid var(--qb-line-strong);
}

.qd-rebuild .qb-stat::before {
  display: none;
}

.qd-rebuild .qb-stat__body {
  align-items: center;
  text-align: center;
  gap: 1px;
}

.qd-rebuild .qb-stat__label {
  font-size: clamp(10px, 0.82vw, 13px);
  font-weight: 700;
  color: #64748b;
  line-height: 1.2;
}

.qd-rebuild .qb-stat__value {
  font-size: clamp(20px, min(2vw, 3.2vh), 34px);
  font-weight: 800;
  color: var(--qb-teal-ink);
  line-height: 1;
}

.qd-rebuild .qb-stat--waiting .qb-stat__value,
.qd-rebuild .qb-stat--serving .qb-stat__value {
  color: #22238f;
}

.qd-rebuild .qb-stat__unit {
  font-size: clamp(9px, 0.78vw, 12px);
  font-weight: 600;
  color: #64748b;
}

.qd-rebuild .qb-stat__value-row {
  gap: clamp(3px, 0.35vw, 5px);
}

.qd-rebuild .qb-stat__icon {
  inline-size: clamp(30px, min(2.8vw, 4.5vh), 40px);
  block-size: clamp(30px, min(2.8vw, 4.5vh), 40px);
  border-radius: 50%;
  background: #eaf2f6;
  color: var(--qb-teal-ink);
  flex-shrink: 0;
}

.qd-rebuild .qb-stat__icon svg {
  inline-size: clamp(14px, 1.2vw, 18px);
  block-size: clamp(14px, 1.2vw, 18px);
}

.qd-rebuild .qb-stat--waiting .qb-stat__icon,
.qd-rebuild .qb-stat--serving .qb-stat__icon {
  color: var(--qb-purple);
  background: #eeeafa;
}

.qd-rebuild .qb__grid {
  grid-template-columns: minmax(185px, 1.02fr) minmax(0, 2.32fr) minmax(185px, 1.02fr);
  align-items: stretch;
}

.qd-rebuild.queue-display--no-next .qb__grid {
  grid-template-columns: minmax(0, 2.45fr) minmax(185px, 1fr);
}

.qd-rebuild.queue-display--no-next .qb__col--waiting,
.qd-rebuild.queue-display--no-recent .qb__col--recent {
  display: none;
}

.qd-rebuild.queue-display--no-recent .qb__grid {
  grid-template-columns: minmax(185px, 1fr) minmax(0, 2.45fr);
}

.qd-rebuild.queue-display--no-next.queue-display--no-recent .qb__grid {
  grid-template-columns: minmax(0, 1fr);
}

.qd-rebuild .qb-recent,
.qd-rebuild .qb-wait,
.qd-rebuild .qb__now-wrap,
.qd-rebuild .queue-media__frame {
  border: 1px solid var(--qb-line);
  box-shadow: none;
}

.qd-rebuild .qb__now-wrap {
  padding: 0;
  background: radial-gradient(circle at 62% 50%, rgba(10, 163, 165, 0.055) 0%, rgba(255, 255, 255, 0) 70%), var(--qb-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.qd-rebuild .qb__now-title {
  position: absolute;
  z-index: 3;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  margin: 0;
  align-self: auto;
  min-inline-size: 0;
  max-inline-size: min(46%, 280px);
  padding: clamp(5px, 0.52vw, 10px) clamp(14px, 1.45vw, 30px);
  border-radius: 0;
  border-start-start-radius: 0;
  border-end-end-radius: clamp(14px, 1.5vw, 28px);
  border-top: 0;
  border-inline-start: 0;
  background: transparent;
  background-color: transparent;
  color: #fff;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: clamp(12px, 1.05vw, 20px);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.qd-rebuild .qb__now-title-icon {
  display: inline-flex;
  color: #fff;
}

.qd-rebuild .qb__now-title-icon svg {
  width: 18px;
  height: 18px;
}

/* Phase badge tab — inline-end corner, mirrors qb__now-title on inline-start */
.qd-rebuild .qb__now-wrap > .qb__now-phase-badge,
.qd-rebuild .qb__now-wrap > #now-ticket-phase-badge {
  position: absolute;
  z-index: 3;
  top: 0;
  inset-inline-end: 0;
  inset-inline-start: auto;
  margin: 0;
  max-inline-size: min(46%, 280px);
  padding: clamp(5px, 0.52vw, 10px) clamp(14px, 1.45vw, 30px);
  border-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: clamp(14px, 1.5vw, 28px);
  border-top: 0;
  border-inline-end: 0;
  background: transparent;
  background-color: transparent;
  color: #fff;
  box-shadow: none;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: clamp(12px, 1.05vw, 20px);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  animation: qb-phase-badge-in 0.35s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.qd-rebuild .qb__now-wrap > .qb__now-phase-badge:not([hidden]),
.qd-rebuild .qb__now-wrap > #now-ticket-phase-badge:not([hidden]) {
  display: inline-flex;
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) > .qb__now-phase-badge,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) > #now-ticket-phase-badge {
  background: transparent;
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) > .qb__now-phase-badge::before,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) > #now-ticket-phase-badge::before {
  background-color: #6d4cc7;
  background-image: linear-gradient(158deg, #5a3daf 0%, #7c3aed 48%, #7d5fd4 100%);
  box-shadow:
    0 4px 14px rgba(124, 58, 237, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) > .qb__now-phase-badge,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) > #now-ticket-phase-badge {
  background: transparent;
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) > .qb__now-phase-badge::before,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) > #now-ticket-phase-badge::before {
  background-color: #c99212;
  background-image: linear-gradient(158deg, #6b4a08 0%, #e8b020 46%, #f0c040 100%);
  box-shadow:
    0 4px 14px rgba(232, 176, 32, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.qd-rebuild .qb__now {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(10px, 1.1vh, 18px);
  padding: clamp(8px, .9vw, 20px) clamp(10px, 1vw, 22px);
  min-height: 0;
  overflow: hidden;
}

.qd-rebuild .qb__now #now-serving-card {
  order: 1;
  flex: 0 0 auto;
  inline-size: min(100%, 736px);
  max-inline-size: 100%;
  min-inline-size: 0;
  margin-inline: auto;
  padding: clamp(6px, .9vw, 20px) clamp(14px, 1.8vw, 44px) clamp(2px, .4vh, 8px);
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 0.85vh, 12px);
}

.qd-rebuild .qb__now .qd-now__active {
  inline-size: 100%;
  max-inline-size: 100%;
  gap: clamp(6px, 0.85vh, 12px);
}

.qd-rebuild .qd-now__hero-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 28px);
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.qd-rebuild .qb__now .qd-now__number,
.qd-rebuild .qb__now #now-ticket-number {
  font-size: clamp(52px, min(7vw, 12vh), 156px);
  line-height: 1.08;
  flex-shrink: 0;
  color: var(--qb-teal-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  display: block;
  max-inline-size: 100%;
  overflow: visible;
  filter: none;
  letter-spacing: 0.02em;
}

.qd-rebuild .qb__now.qd-pro__now--multi .qd-now__number,
.qd-rebuild .qb__now.qd-pro__now--multi #now-ticket-number {
  font-size: clamp(40px, min(5.5vw, 9vh), 112px);
}

.qd-rebuild .qb__now .qd-now__service,
.qd-rebuild .qb__now #now-ticket-service {
  font-size: var(--qb-fs-hero-service);
  font-weight: 700;
  color: var(--qb-teal-ink);
  line-height: 1.25;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  margin: 0;
  text-align: start;
  align-self: stretch;
}

.qd-rebuild .qb__now .qd-now__cta,
.qd-rebuild .qb__now #now-ticket-destination {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35em;
  align-self: stretch;
  inline-size: auto;
  max-inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
  border: 0;
  background: #e9eef3;
  color: var(--qb-teal-ink);
  font-size: clamp(1rem, min(1.55vw, 2.35vh), 1.65rem);
  font-weight: 600;
  padding: clamp(8px, 0.9vh, 12px) clamp(14px, 1.6vw, 22px);
  border-radius: 12px;
  line-height: 1.35;
  text-align: start;
  white-space: normal;
  flex-shrink: 1;
}

.qd-rebuild .qd-now__cta-lead {
  display: inline;
  font-size: 1em;
  font-weight: 600;
  color: #3d5f73;
  opacity: 1;
  white-space: nowrap;
}

.qd-rebuild .qd-now__cta-target {
  display: inline;
  font-size: 1em;
  font-weight: 800;
  color: var(--qb-teal-ink);
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
}

.qd-rebuild .qb__now #now-serving-card.qd-now--reminder,
.qd-rebuild .qb__now #now-serving-card.qd-now--final {
  border-color: transparent;
  box-shadow: none;
  border-radius: 0;
}

.qd-rebuild .qb__now #now-serving-card.qd-now--final .qd-now__number,
.qd-rebuild .qb__now #now-serving-card.qd-now--final #now-ticket-service {
  color: color-mix(in srgb, var(--qb-final-call) 86%, #6b4a08);
}

.qd-rebuild .qb__feature {
  min-height: clamp(142px, 28.8vh, 350px);
  max-height: 100%;
  display: grid;
  grid-template-columns: minmax(170px, 0.45fr) minmax(0, 1.55fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  background: var(--qb-card);
  border: 1px solid var(--qb-line);
  border-radius: var(--qb-radius-lg);
  box-shadow: var(--qb-shadow-soft);
}

/* QR only — balanced horizontal strip */
.qd-rebuild .qb__feature:has(#display-media-zone[hidden]) {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.qd-rebuild .qb__feature:has(#display-media-zone[hidden]) .qb__qr-stage {
  inline-size: min(100%, 680px);
}

.qd-rebuild .qb__qr-stage {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.qd-rebuild .qb__media {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  padding: 0;
}

.qd-rebuild .queue-media {
  inline-size: 100%;
  block-size: 100%;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.qd-rebuild .qb__feature .qb__media {
  align-items: center;
}

.qd-rebuild .qb__feature .queue-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.qd-rebuild .qb__feature .queue-media__frame,
.qd-rebuild .qb__feature .media-stage {
  inline-size: 100% !important;
  block-size: auto !important;
  max-inline-size: 100%;
  max-block-size: 100%;
  aspect-ratio: var(--queue-media-aspect, 16 / 9) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #fff;
  margin: 0 auto;
}

.qd-rebuild .qb__feature .queue-media__frame[data-media-orientation="portrait"],
.qd-rebuild .qb__feature .media-stage[data-media-orientation="portrait"] {
  inline-size: auto !important;
  block-size: 100% !important;
}

.qd-rebuild .qb__feature .queue-media__shell,
.qd-rebuild .qb__feature .media-player-shell {
  background: #fff;
}

.qd-rebuild .qb__feature .queue-media__frame :is(img, video),
.qd-rebuild .qb__feature .media-player-shell :is(img, video) {
  object-fit: contain;
  object-position: center;
  background: #fff;
}

.qd-rebuild .qb__feature .queue-media__frame iframe,
.qd-rebuild .qb__feature .media-player-shell iframe {
  background: #fff;
}

.qd-rebuild .qb-qr {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  min-height: 0;
  padding: clamp(8px, .85vw, 14px);
  overflow: hidden;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

.qd-rebuild .qb-qr__shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.qd-rebuild .qb-qr__stage {
  grid-area: stage;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: clamp(4px, .55vh, 8px);
}

.qd-rebuild .qb-qr__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, .75vw, 12px);
  border-radius: clamp(14px, 1.1vw, 20px);
  background: #fff;
  border: 1px solid rgba(10, 163, 165, .22);
  box-shadow: 0 6px 22px rgba(10, 163, 165, .1);
}

.qd-rebuild .qb-qr__corner {
  position: absolute;
  inline-size: clamp(12px, 1vw, 18px);
  block-size: clamp(12px, 1vw, 18px);
  border: 2.5px solid var(--qb-teal);
  pointer-events: none;
}

.qd-rebuild .qb-qr__corner--tl { inset-block-start: 6px; inset-inline-start: 6px; border-block-end: 0; border-inline-end: 0; border-radius: 4px 0 0 0; }
.qd-rebuild .qb-qr__corner--tr { inset-block-start: 6px; inset-inline-end: 6px; border-block-end: 0; border-inline-start: 0; border-radius: 0 4px 0 0; }
.qd-rebuild .qb-qr__corner--bl { inset-block-end: 6px; inset-inline-start: 6px; border-block-start: 0; border-inline-end: 0; border-radius: 0 0 0 4px; }
.qd-rebuild .qb-qr__corner--br { inset-block-end: 6px; inset-inline-end: 6px; border-block-start: 0; border-inline-start: 0; border-radius: 0 0 4px 0; }

.qd-rebuild .qb-qr__code {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(84px, min(12vh, 15vw), 160px);
  block-size: clamp(84px, min(12vh, 15vw), 160px);
  aspect-ratio: 1;
  padding: clamp(4px, .4vw, 6px);
  border-radius: clamp(8px, .7vw, 11px);
  background: #fff;
}

.qd-rebuild .qb-qr__code .join-qr-host {
  inline-size: 100%;
  block-size: 100%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border-radius: clamp(6px, .55vw, 9px);
  background: #fff;
  box-shadow: none;
  aspect-ratio: 1;
  max-inline-size: none;
}

.qd-rebuild .qb-qr__code .join-qr-host::after {
  display: none;
}

.qd-rebuild .qb-qr__code .join-qr-host :is(canvas, img) {
  inline-size: 100% !important;
  block-size: 100% !important;
  object-fit: contain;
  display: block;
}

.qd-rebuild .qb-qr__code .qr-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  font-size: var(--qb-fs-ui);
  font-weight: 600;
  color: #64748b;
  text-align: center;
}

.qd-rebuild:not(.queue-display--no-qr) .qb__feature:not(:has(#display-media-zone[hidden])) .qb__qr-stage {
  border-inline-end: 1px solid var(--qb-line);
}

/* QR + media — vertical ticket in side column */
.qd-rebuild:not(.queue-display--no-qr) .qb__feature:not(:has(#display-media-zone[hidden])) .qb-qr__shell {
  gap: clamp(4px, 0.6vh, 8px);
}

.qd-rebuild:not(.queue-display--no-qr) .qb__feature:not(:has(#display-media-zone[hidden])) .qb-qr__frame {
  padding: clamp(6px, 0.6vw, 10px);
}

.qd-rebuild:not(.queue-display--no-qr) .qb__feature:not(:has(#display-media-zone[hidden])) .qb-qr__corner--tl { inset-block-start: 4px; inset-inline-start: 4px; }
.qd-rebuild:not(.queue-display--no-qr) .qb__feature:not(:has(#display-media-zone[hidden])) .qb-qr__corner--tr { inset-block-start: 4px; inset-inline-end: 4px; }
.qd-rebuild:not(.queue-display--no-qr) .qb__feature:not(:has(#display-media-zone[hidden])) .qb-qr__corner--bl { inset-block-end: 4px; inset-inline-start: 4px; }
.qd-rebuild:not(.queue-display--no-qr) .qb__feature:not(:has(#display-media-zone[hidden])) .qb-qr__corner--br { inset-block-end: 4px; inset-inline-end: 4px; }

.qd-rebuild:not(.queue-display--no-qr) .qb__feature:not(:has(#display-media-zone[hidden])) .qb-qr__code {
  inline-size: clamp(80px, min(14.5vh, 17vw), 150px);
  block-size: clamp(80px, min(14.5vh, 17vw), 150px);
}

/* QR alone — scan pass layout: QR pillar + copy column */
.qd-rebuild .qb__feature:has(#display-media-zone[hidden]) .qb-qr {
  padding: clamp(10px, 1.1vw, 18px) clamp(14px, 1.8vw, 36px);
}

.qd-rebuild .qb__feature:has(#display-media-zone[hidden]) .qb-qr__shell {
  align-items: center;
  column-gap: clamp(18px, 2.4vw, 36px);
  row-gap: clamp(8px, 1vh, 14px);
  inline-size: min(100%, 720px);
  padding: clamp(14px, 1.25vw, 22px) clamp(18px, 1.8vw, 32px);
}

.qd-rebuild .qb__feature:has(#display-media-zone[hidden]) .qb-qr__stage {
  align-self: stretch;
  padding: 0;
}

.qd-rebuild .qb__feature:has(#display-media-zone[hidden]) .qb-qr__frame {
  block-size: 100%;
  min-block-size: clamp(112px, min(16vh, 18vw), 196px);
}

.qd-rebuild .qb__feature:has(#display-media-zone[hidden]) .qb-qr__code {
  inline-size: clamp(100px, min(14vh, 16vw), 176px);
  block-size: clamp(100px, min(14vh, 16vw), 176px);
}

.qd-rebuild .qb-recent__head,
.qd-rebuild .qb-wait__head {
  background: linear-gradient(180deg, #fafbfc 0%, #f4f7fb 100%);
}

.qd-rebuild .qb-recent {
  border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(7, 26, 61, .04);
}

.qd-rebuild .qb-recent__head {
  padding: clamp(11px, 1vw, 17px) clamp(14px, 1.1vw, 20px);
  border-block-end-color: #e8eef4;
}

.qd-rebuild .qb-recent__icon {
  inline-size: clamp(34px, 2.55vw, 42px);
  block-size: clamp(34px, 2.55vw, 42px);
  border-radius: 11px;
  color: var(--qb-teal-ink);
  background: rgba(10, 163, 165, .07);
  border: 1px solid rgba(10, 163, 165, .1);
}

.qd-rebuild .qb-wait {
  border-color: #d8e1ea;
  box-shadow: 0 2px 6px rgba(7, 26, 61, .06);
}

.qd-rebuild .qb-wait__head {
  padding: 0;
  border-block-end-color: #cdd8e4;
}

.qd-rebuild .qb-wait__title-wrap {
  gap: clamp(10px, .85vw, 14px);
  align-items: center;
}

.qd-rebuild .qb-wait__icon {
  inline-size: clamp(36px, 2.85vw, 44px);
  block-size: clamp(36px, 2.85vw, 44px);
  border-radius: 12px;
  color: #0c6e96;
  background: linear-gradient(145deg, rgba(12, 110, 150, .12) 0%, rgba(12, 110, 150, .06) 100%);
  border: 1px solid rgba(12, 110, 150, .18);
  box-shadow: 0 2px 8px rgba(12, 110, 150, .1);
}

.qd-rebuild .qb-wait__icon svg {
  inline-size: clamp(18px, 1.4vw, 22px);
  block-size: clamp(18px, 1.4vw, 22px);
  opacity: 1;
}

.qd-rebuild .qb-wait__title {
  font-size: clamp(19px, 1.55vw, 28px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.08;
}

.qd-rebuild .qb-recent__body,
.qd-rebuild .qb-wait__body {
  padding: 0;
  background: #fff;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.qd-rebuild .qb-wait__list,
.qd-rebuild #next-list {
  flex: 1 1 auto;
  min-height: 0;
}

/* Override legacy display.css grid rules inside the unified board */
.qd-rebuild #next-list:not(:has(.next-list-empty)) {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
  grid-template-columns: unset;
  overflow: hidden;
}

.qd-rebuild #next-list:has(.next-list-empty) {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 2.8vh, 36px) clamp(14px, 1.1vw, 22px);
  margin-top: 0;
  overflow: visible;
}

.qd-rebuild .next-list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, .75vh, 10px);
  max-inline-size: 26ch;
  margin: 0;
  text-align: center;
}

.qd-rebuild .next-list-empty::before {
  content: "";
  display: block;
  inline-size: clamp(38px, 3.2vw, 48px);
  block-size: clamp(38px, 3.2vw, 48px);
  margin-block-end: 2px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Ccircle cx='3.5' cy='6' r='1'/%3E%3Ccircle cx='3.5' cy='12' r='1'/%3E%3Ccircle cx='3.5' cy='18' r='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 52%;
}

.qd-rebuild .next-list-empty strong {
  font-size: var(--qb-fs-list-service);
  font-weight: 600;
  color: #334155;
  line-height: 1.2;
  white-space: normal !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.qd-rebuild .next-list-empty span {
  font-size: var(--qb-fs-list-meta);
  font-weight: 600;
  color: #64748b;
  line-height: 1.5;
}

.qd-rebuild :is(bdi, .ticket-number-token, .qb-header__time, .qb-stat__value, .qb-recent__stat--time .qb-recent__stat-value) {
  font-family: "Inter", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

.qd-rebuild .qb-wait .qd-next-card {
  /* Legacy grid-template-columns removed – cards now use two-line grid inside .qb-wait__row */
  gap: clamp(6px, 0.55vw, 10px);
}

.qd-rebuild .qb-wait .qd-next-card {
  padding: 0;
  border-block-end: 1px solid #e6ecf2;
  border-inline: none;
  border-radius: 0;
  box-shadow: none;
}

.qd-rebuild .qb-wait .qd-next-card--first {
  border-block-start: none;
  border-block-end-color: #e6ecf2;
}

.qd-rebuild .qb-wait .qd-next-card__number {
  font-size: clamp(20px, 1.65vw, 28px);
  font-weight: 900;
  color: #064d50;
}

.qd-rebuild .qb-wait .qd-next-card__service {
  font-size: clamp(18px, 1.65vw, 26px);
  font-weight: 800;
  color: #0a1d42;
  line-height: 1.15;
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.qd-rebuild .qb-wait__pager {
  pointer-events: auto;
  padding: clamp(6px, .65vw, 10px) clamp(10px, .85vw, 14px);
  border-block-start: 1px solid #eef2f6;
  background: #fafbfc;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-label {
  font-size: var(--qb-fs-list-meta);
  font-weight: 600;
  color: #64748b;
}

.qd-rebuild .qb-footer {
  margin-block-start: var(--qb-gap);
  min-height: clamp(48px, 7vh, 96px);
  padding: clamp(8px, .9vw, 18px) clamp(22px, 2.8vw, 70px);
}

.qd-rebuild .qb-footer__announcement {
  font-size: var(--qb-fs-ui);
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
}

.qd-rebuild .qb-footer__title {
  font-size: clamp(0.95rem, min(1.15vw, 2vh), 1.4rem);
  font-weight: 700;
  color: #fff;
}

.qd-rebuild .qb-footer__text {
  font-size: var(--qb-fs-ui);
  font-weight: 600;
  color: rgba(219, 231, 244, .88);
}

.qd-rebuild .qb-footer__live,
.qd-rebuild .qb-footer__reconnect {
  font-size: var(--qb-fs-ui);
  font-weight: 700;
}

@media (max-height: 700px) {
  .qd-rebuild {
    --qb-fs-hero-service: clamp(1.35rem, min(2.4vw, 3.5vh), 2.5rem);
    --qb-fs-hero-cta: clamp(1.05rem, min(1.8vw, 2.6vh), 1.75rem);
    --qb-fs-list-num: clamp(1.1rem, 1.75vw, 1.85rem);
    --qb-fs-list-service: clamp(0.92rem, 1.25vw, 1.35rem);
    --qb-fs-list-meta: clamp(0.82rem, 1vw, 1.15rem);
    --qb-fs-panel-title: clamp(0.95rem, 1.15vw, 1.25rem);
    --qb-fs-col-header: clamp(0.8rem, 0.95vw, 1rem);
    --qb-fs-stat-label: clamp(0.85rem, 1vw, 1.15rem);
    --qb-fs-stat-unit: clamp(0.8rem, 0.95vw, 1.05rem);
    --qb-fs-ui: clamp(0.8rem, 0.95vw, 1.1rem);
  }

  .qd-rebuild .qb {
    padding-block-start: 6px;
  }

  .qd-rebuild .qb__col--center {
    grid-template-rows: clamp(220px, 32vh, 280px) minmax(0, 1fr);
  }

  .qd-rebuild .qb-header {
    min-height: 60px;
    padding-block: 8px;
  }

  .qd-rebuild .qb-stats {
    min-height: 0;
    max-height: 50px;
  }

  .qd-rebuild .qb__now .qd-now__number,
  .qd-rebuild .qb__now #now-ticket-number {
    font-size: clamp(51px, min(8vw, 14.4vh), 120px);
  }

  .qd-rebuild .qb-qr__code {
    inline-size: clamp(88px, min(11vh, 14vw), 148px);
    block-size: clamp(88px, min(11vh, 14vw), 148px);
  }

  .qd-rebuild .qb__feature:has(#display-media-zone[hidden]) .qb-qr__code {
    inline-size: clamp(96px, min(13vh, 15vw), 156px);
    block-size: clamp(96px, min(13vh, 15vw), 156px);
  }

  .qd-rebuild .qb-qr {
    padding: clamp(6px, .65vw, 10px);
  }

  .qd-rebuild .qb-qr__shell {
    padding: clamp(8px, .85vw, 12px);
    gap: clamp(6px, .8vh, 10px);
  }

  .qd-rebuild .queue-media__frame {
    block-size: min(100%, 27vh, calc((100vw - 320px) / 1.7778));
  }

  .qd-rebuild .qb-footer {
    min-height: 42px;
  }
}

@media (max-width: 1180px) {
  .qd-rebuild .qb__grid {
    grid-template-columns: minmax(160px, .9fr) minmax(0, 2.1fr) minmax(160px, .9fr);
  }

  .qd-rebuild .qb__feature {
    grid-template-columns: minmax(130px, .5fr) minmax(0, 1.85fr);
  }
}

@media (max-width: 900px) {
  .qd-rebuild .qb__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .qd-rebuild .qb__col--waiting,
  .qd-rebuild .qb__col--recent {
    display: none;
  }

  .qd-rebuild .qb-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-aspect-ratio: 21 / 9) {
  .qd-rebuild .qb__grid {
    grid-template-columns: minmax(220px, .9fr) minmax(0, 2.6fr) minmax(220px, .9fr);
  }
}

@media (min-width: 2600px) {
  .qd-rebuild .qb__now .qd-now__number,
  .qd-rebuild .qb__now #now-ticket-number {
    font-size: clamp(144px, min(6.8vw, 13.6vh), 336px);
  }
}

/* =====================================================================
   Layout containment — prevents now-calling / media / QR overlap.
   Root cause: overflow:visible on .qb__now-wrap + absolute QR head +
   conflicting duplicate rules in earlier sections.
   ===================================================================== */
.qd-rebuild .qb__col--center {
  display: grid;
  grid-template-rows: clamp(220px, 32vh, 280px) minmax(0, 1fr);
  gap: var(--qb-gap);
  overflow: hidden;
  min-height: 0;
}

.qd-rebuild .qb__now-wrap {
  grid-row: 1;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--qb-card);
  padding: 0;
  isolation: isolate;
  position: relative;
  border-radius: var(--qb-radius-lg);
}

.qd-rebuild .qb__now-wrap > .qb__now-title {
  position: absolute;
  z-index: 3;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  margin: 0;
  max-inline-size: min(46%, 280px);
  padding: clamp(5px, 0.52vw, 10px) clamp(14px, 1.45vw, 30px);
  border-radius: 0;
  border-start-start-radius: 0;
  border-end-end-radius: clamp(14px, 1.5vw, 28px);
  border-top: 0;
  border-inline-start: 0;
  background: transparent;
  background-color: transparent;
  color: #fff;
  box-shadow: none;
  font-size: clamp(12px, 1.05vw, 20px);
  font-weight: 800;
  gap: 6px;
  white-space: nowrap;
}

.qd-rebuild .qb__now-wrap > .qb__now-title .qb__now-title-icon svg {
  width: 18px;
  height: 18px;
}

/* Phase badge — mirrors "calling now" tab on the opposite corner; out of document flow */
.qd-rebuild .qb__now-wrap > .qb__now-phase-badge,
.qd-rebuild .qb__now-wrap > #now-ticket-phase-badge {
  position: absolute;
  z-index: 3;
  top: 0;
  inset-inline-end: 0;
  inset-inline-start: auto;
  margin: 0;
  max-inline-size: min(46%, 280px);
  padding: clamp(5px, 0.52vw, 10px) clamp(14px, 1.45vw, 30px);
  border-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: clamp(14px, 1.5vw, 28px);
  border-top: 0;
  border-inline-end: 0;
  background: transparent;
  background-color: transparent;
  color: #fff;
  box-shadow: none;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: clamp(12px, 1.05vw, 20px);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  animation: qb-phase-badge-in 0.35s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.qd-rebuild .qb__now-wrap > .qb__now-phase-badge:not([hidden]),
.qd-rebuild .qb__now-wrap > #now-ticket-phase-badge:not([hidden]) {
  display: inline-flex;
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) > .qb__now-phase-badge,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) > #now-ticket-phase-badge {
  background: transparent;
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) > .qb__now-phase-badge::before,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) > #now-ticket-phase-badge::before {
  background-color: #6d4cc7;
  background-image: linear-gradient(158deg, #5a3daf 0%, #7c3aed 48%, #7d5fd4 100%);
  box-shadow:
    0 4px 14px rgba(124, 58, 237, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) > .qb__now-phase-badge,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) > #now-ticket-phase-badge {
  background: transparent;
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) > .qb__now-phase-badge::before,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) > #now-ticket-phase-badge::before {
  background-color: #c99212;
  background-image: linear-gradient(158deg, #6b4a08 0%, #e8b020 46%, #f0c040 100%);
  box-shadow:
    0 4px 14px rgba(232, 176, 32, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.qd-rebuild .qb__now-wrap:has(#now-ticket-active-group[hidden]) > .qb__now-phase-badge,
.qd-rebuild .qb__now-wrap:has(#now-ticket-active-group[hidden]) > #now-ticket-phase-badge,
.qd-rebuild .qb__now-wrap:has(#now-ticket-active-group[hidden]) > .qb__now-title {
  display: none !important;
}

@keyframes qb-phase-badge-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qd-rebuild .qb__now-wrap > .qb__now-phase-badge,
  .qd-rebuild .qb__now-wrap > #now-ticket-phase-badge {
    animation: none;
  }
}

.qd-rebuild .qb__feature {
  grid-row: 2;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(148px, 24%) minmax(0, 1fr);
  gap: clamp(10px, 1vw, 16px);
  padding: clamp(10px, 1vw, 14px);
  align-items: stretch;
  background: var(--qb-card);
  isolation: isolate;
  flex-basis: auto;
}

.qd-rebuild .qb__now {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(8px, 0.8vw, 14px);
  padding:
    clamp(38px, 4.8vh, 54px)
    clamp(10px, 1vw, 20px)
    clamp(6px, 0.7vh, 12px);
}

.qd-rebuild .qb__now #now-serving-card {
  grid-area: unset;
  order: unset;
  flex: 1 1 auto;
  align-self: center;
  justify-self: center;
  min-height: 0;
  inline-size: 100%;
  max-inline-size: min(100%, 880px);
  min-inline-size: 0;
  margin-inline: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 0.9vh, 14px);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  box-sizing: border-box;
  padding: clamp(4px, 0.6vh, 10px) clamp(10px, 1.2vw, 24px);
}

.qd-rebuild .qb__now #now-serving-card.qd-now--reminder,
.qd-rebuild .qb__now #now-serving-card.qd-now--final {
  border-color: transparent;
  box-shadow: none;
  border-radius: 0;
}

.qd-rebuild .qb__now #now-serving-card.qd-now--final .qd-now__number,
.qd-rebuild .qb__now #now-serving-card.qd-now--final #now-ticket-service {
  color: color-mix(in srgb, var(--qb-final-call) 86%, #6b4a08);
}

.qd-rebuild .qb__now .qd-now__hero-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 28px);
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
}

.qd-rebuild .qb__now .qd-now__active {
  gap: clamp(8px, 0.85vh, 14px);
  flex: 0 1 auto;
  min-height: 0;
  justify-content: center;
  overflow: visible;
  inline-size: 100%;
  max-inline-size: 100%;
}

.qd-rebuild .qb__now .qd-now__number,
.qd-rebuild .qb__now #now-ticket-number {
  font-size: clamp(44px, min(5.5vw, 10vh), 120px);
  line-height: 1.08;
  color: var(--qb-teal-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  display: block;
  max-inline-size: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  padding-block: 0.04em 0.02em;
  filter: none;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.qd-rebuild .qb__now.qd-pro__now--multi .qd-now__number,
.qd-rebuild .qb__now.qd-pro__now--multi #now-ticket-number {
  font-size: clamp(38px, min(4.8vw, 8.5vh), 100px);
}

.qd-rebuild .qb__now .qd-now__service,
.qd-rebuild .qb__now #now-ticket-service {
  font-size: clamp(1.1rem, min(1.8vw, 2.8vh), 2.2rem);
  line-height: 1.3;
  font-weight: 800;
  max-inline-size: 100%;
  margin: 0;
  text-align: start;
  align-self: stretch;
}

.qd-rebuild .qb__now .qd-now__cta,
.qd-rebuild .qb__now #now-ticket-destination {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35em;
  align-self: stretch;
  inline-size: auto;
  max-inline-size: 100%;
  min-inline-size: 0;
  border: 0;
  background: #e9eef3;
  color: var(--qb-teal-ink);
  font-size: clamp(0.95rem, min(1.35vw, 2.1vh), 1.45rem);
  font-weight: 600;
  padding: clamp(8px, 0.9vh, 12px) clamp(14px, 1.6vw, 22px);
  border-radius: 12px;
  line-height: 1.35;
  text-align: start;
  white-space: normal;
}

.qd-rebuild .qd-now__cta-lead {
  display: inline;
  font-size: clamp(0.95rem, min(1.35vw, 2vh), 1.35rem);
  font-weight: 600;
  color: #3d5f73;
  opacity: 1;
  white-space: normal;
}

.qd-rebuild .qd-now__cta-target {
  display: inline;
  font-size: clamp(0.95rem, min(1.35vw, 2vh), 1.35rem);
  font-weight: 800;
  color: var(--qb-teal-ink);
  letter-spacing: 0.01em;
  line-height: 1.3;
  white-space: normal;
}

.qd-rebuild .qb__qr-stage,
.qd-rebuild .qb__media {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.qd-rebuild .qb-qr {
  block-size: 100%;
  max-block-size: 100%;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.qd-rebuild .qb-qr__shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.5vh, 8px);
}

.qd-rebuild .qb-qr__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qd-rebuild .queue-media {
  block-size: 100%;
  inline-size: 100%;
  min-height: 0;
  overflow: hidden;
}

.qd-rebuild .queue-media__frame,
.qd-rebuild .media-stage {
  block-size: 100%;
  inline-size: auto;
  max-block-size: 100%;
  max-inline-size: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--qb-radius);
  overflow: hidden;
  background: #fff;
  margin: 0 auto;
}

@media (max-height: 820px) {
  .qd-rebuild .qb__col--center {
    grid-template-rows: clamp(220px, 32vh, 280px) minmax(0, 1fr);
  }

  .qd-rebuild .qb__now .qd-now__number,
  .qd-rebuild .qb__now #now-ticket-number {
    font-size: clamp(36px, min(5vw, 8.5vh), 88px);
  }
}

/* waiting queue density — see compact feed block at end of file */

/* --- Redesign Calling Now - Micro-animations & sound waves --- */
@keyframes qb-wave-pulse-inner {
  0%, 100% { opacity: 0.35; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes qb-wave-pulse-outer {
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.05); }
}

.qd-rebuild .qb__now-title-icon svg path:nth-of-type(1) {
  animation: qb-wave-pulse-inner 1.8s ease-in-out infinite;
  transform-origin: 6px 12px;
}

.qd-rebuild .qb__now-title-icon svg path:nth-of-type(2) {
  animation: qb-wave-pulse-outer 1.8s ease-in-out infinite;
  transform-origin: 6px 12px;
  animation-delay: 0.4s;
}

/* =====================================================================
   Phase alert polish — unified wrap frame + refined corner tabs
   ===================================================================== */
.qd-rebuild .qb__now-wrap > .qb__now-title {
  isolation: isolate;
  color: #fff;
  background: transparent;
  background-color: transparent;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top: 0;
  border-inline-start: 0;
  border-radius: 0;
  border-start-start-radius: 0;
  border-end-end-radius: clamp(14px, 1.5vw, 28px);
  box-shadow: none;
  letter-spacing: 0.015em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
}

.qd-rebuild .qb__now-wrap > .qb__now-title::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: #055e62;
  background-image: linear-gradient(158deg, #033f44 0%, #055e62 38%, #0aa3a5 100%);
  box-shadow:
    0 4px 14px rgba(5, 94, 98, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.qd-rebuild .qb__now-wrap > .qb__now-phase-badge,
.qd-rebuild .qb__now-wrap > #now-ticket-phase-badge {
  isolation: isolate;
  color: #fff;
  background: transparent;
  background-color: transparent;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-top: 0;
  border-inline-end: 0;
  border-radius: 0;
  border-start-end-radius: 0;
  border-end-start-radius: clamp(14px, 1.5vw, 28px);
  box-shadow: none;
  letter-spacing: 0.015em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.14);
}

.qd-rebuild .qb__now-wrap > .qb__now-phase-badge::before,
.qd-rebuild .qb__now-wrap > #now-ticket-phase-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: #6d4cc7;
  background-image: linear-gradient(158deg, #5a3daf 0%, #7c3aed 48%, #7d5fd4 100%);
  box-shadow:
    0 4px 14px rgba(124, 58, 237, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  pointer-events: none;
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) {
  border-color: color-mix(in srgb, var(--qb-recall) 22%, var(--qb-line));
  background:
    radial-gradient(ellipse 90% 52% at 50% 0%, color-mix(in srgb, var(--qb-recall) 9%, transparent) 0%, transparent 72%),
    var(--qb-recall-bg);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--qb-recall) 10%, transparent),
    0 8px 26px color-mix(in srgb, var(--qb-recall) 7%, transparent);
}

.qd-rebuild .qb__now #now-serving-card.qd-now--reminder .qd-now__number,
.qd-rebuild .qb__now #now-serving-card.qd-now--reminder #now-ticket-number,
.qd-rebuild .qb__now #now-serving-card.qd-now--reminder #now-ticket-service {
  color: var(--qb-recall);
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) .qd-now__cta,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) #now-ticket-destination {
  border: 1px solid color-mix(in srgb, var(--qb-recall) 18%, #fff);
  background: color-mix(in srgb, var(--qb-recall) 6%, #fff);
  color: var(--qb-recall-ink);
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) .qd-now__cta-target {
  color: var(--qb-recall);
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) {
  border-color: color-mix(in srgb, var(--qb-final-call) 26%, var(--qb-line));
  background:
    radial-gradient(ellipse 90% 52% at 50% 0%, color-mix(in srgb, var(--qb-final-call) 9%, transparent) 0%, transparent 72%),
    var(--qb-card);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--qb-final-call) 12%, transparent),
    0 8px 28px color-mix(in srgb, var(--qb-final-call) 8%, transparent);
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) > .qb__now-phase-badge,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) > #now-ticket-phase-badge {
  background: transparent;
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) > .qb__now-phase-badge,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) > #now-ticket-phase-badge {
  background: transparent;
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) > .qb__now-title,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) > .qb__now-title {
  background: transparent;
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) > .qb__now-title::before,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) > .qb__now-title::before {
  background-color: #055e62;
  background-image: linear-gradient(158deg, #033f44 0%, #055e62 38%, #0aa3a5 100%);
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) .qd-now__cta,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) #now-ticket-destination {
  border-color: color-mix(in srgb, var(--qb-final-call) 16%, rgba(10, 90, 138, 0.12));
  background: linear-gradient(180deg, #faf6ee 0%, #f3ecdc 100%);
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) .qd-now__cta-target {
  color: color-mix(in srgb, var(--qb-final-call) 88%, #6b4a08);
}

.qd-rebuild .qb__now #now-ticket-call-status {
  display: block;
  margin: clamp(8px, 0.8vh, 14px) 0 0;
  color: #526579;
  font-size: clamp(14px, 1.05vw, 22px);
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}

.qd-rebuild .qb__now #now-ticket-call-status[hidden] {
  display: none;
}

.qd-rebuild .qb__now #now-serving-card.qd-now--final #now-ticket-call-status {
  color: color-mix(in srgb, var(--qb-final-call) 88%, #6b4a08);
}

.qd-rebuild .qd-now__cta-lead::after {
  content: '\00a0·\00a0';
  font-weight: 400;
  opacity: 0.38;
  color: #64748b;
}

@media (max-width: 720px), (max-height: 560px) {
  .qd-rebuild .qd-now__hero-layout,
  .qd-rebuild .qb__now .qd-now__hero-layout {
    flex-direction: column;
    gap: clamp(8px, 1vh, 14px);
  }

  .qd-rebuild .qb__now .qd-now__service,
  .qd-rebuild .qb__now #now-ticket-service,
  .qd-rebuild .qb__now .qd-now__cta,
  .qd-rebuild .qb__now #now-ticket-destination {
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .qd-rebuild .qb__now .qd-now__cta,
  .qd-rebuild .qb__now #now-ticket-destination {
    flex-wrap: wrap;
    white-space: normal;
    border-radius: 14px;
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder),
  .qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) {
    transition: none;
  }
}

/* =====================================================================
   QR quick-booking badge — mirrors "calling now" corner tab on feature panel
   ===================================================================== */
.qd-rebuild .qb__qr-badge {
  position: absolute !important;
  z-index: 10 !important;
  top: -1px !important;
  inset-inline-start: -1px !important;
  inset-inline-end: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: clamp(5px, 0.52vw, 9px) clamp(14px, 1.45vw, 24px) !important;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important; /* Premium Indigo-Purple Gradient */
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-top: none !important;
  border-inline-start: none !important;
  
  /* Matches parent window border radius (var(--qb-radius-lg)) */
  border-radius: 0 !important;
  border-start-start-radius: var(--qb-radius-lg) !important;
  border-end-end-radius: clamp(14px, 1.5vw, 28px) !important;
  
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  
  /* Font styling to match Calling Now badge */
  font-size: clamp(12px, 1.05vw, 16px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  inline-size: auto !important;
  width: auto !important;
  max-inline-size: min(46%, 280px) !important;
}

.qd-rebuild .qb__qr-badge .qb__qr-badge-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  line-height: 1.2 !important;
}

.qd-rebuild .qb__qr-badge .qb__qr-badge-icon svg {
  width: clamp(14px, 1.25vw, 18px) !important;
  height: clamp(14px, 1.25vw, 18px) !important;
  display: block !important;
}

.qd-rebuild .qb__qr-badge .qb__qr-badge-text {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: #fff !important;
  line-height: 1.2 !important;
  display: inline-block !important;
}

.qd-rebuild .qb__feature {
  position: relative;
  isolation: isolate;
}

/* =====================================================================
   Recent calls — ultra-compact single-line feed
   ===================================================================== */
.qd-rebuild .qb__grid {
  grid-template-columns: minmax(190px, 1fr) minmax(0, 2.2fr) minmax(240px, 1.2fr);
}

.qd-rebuild.queue-display--no-next .qb__grid {
  grid-template-columns: minmax(0, 2.35fr) minmax(240px, 1.15fr);
}

.qd-rebuild.queue-display--no-recent .qb__grid {
  grid-template-columns: minmax(190px, 1fr) minmax(0, 2.35fr);
}

.qd-rebuild .qb-recent {
  background: #fff;
  border-color: #d8e1ea;
  box-shadow: 0 2px 6px rgba(7, 26, 61, .06);
}

.qd-rebuild .qb-recent__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  min-height: clamp(54px, 5.2vh, 72px);
  padding: 0;
  background:
    linear-gradient(180deg, rgba(10, 163, 165, .09) 0%, rgba(255, 255, 255, .98) 68%),
    #fff;
  border-block-end: 1px solid #cdd8e4;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .75);
}

.qd-rebuild .qb-recent__title-wrap {
  gap: clamp(10px, .85vw, 14px);
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(12px, 1.1vh, 17px) clamp(14px, 1.2vw, 20px);
}

.qd-rebuild .qb-recent__title-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, .35vh, 5px);
  min-width: 0;
}

.qd-rebuild .qb-recent__title {
  margin: 0;
  color: #061528;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(19px, 1.55vw, 28px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.qd-rebuild .qb-recent__hint {
  margin: 0;
  color: #5a6b7d;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(11px, .88vw, 14px);
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.qd-rebuild .qb-recent__icon {
  flex-shrink: 0;
  inline-size: clamp(36px, 2.85vw, 44px);
  block-size: clamp(36px, 2.85vw, 44px);
  border-radius: 12px;
  color: #0a8ea0;
  background: linear-gradient(145deg, rgba(10, 163, 165, .12) 0%, rgba(10, 163, 165, .06) 100%);
  border: 1px solid rgba(10, 163, 165, .18);
  box-shadow: 0 2px 8px rgba(10, 163, 165, .1);
}

.qd-rebuild .qb-recent__icon svg {
  inline-size: clamp(18px, 1.4vw, 22px);
  block-size: clamp(18px, 1.4vw, 22px);
}

.qd-rebuild .qb-recent__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  background: #e9eef3;
  overflow: hidden;
}

.qd-rebuild .qb-recent__list {
  flex: 1 1 auto;
  min-height: 0;
  list-style: none;
  margin: 0;
  padding: clamp(3px, .32vh, 5px) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, .32vh, 5px);
  overflow: hidden;
  overscroll-behavior: none;
  background: #e9eef3;
}

.qd-rebuild .qb-recent__list::before {
  display: none;
}

.qd-rebuild .qb-recent__item {
  flex: 0 0 auto;
  min-height: clamp(76px, 7.2vh, 98px);
  padding: 0;
  border-radius: 0;
  background: #fff;
  border: none;
  box-shadow: 0 1px 4px rgba(7, 26, 61, .06);
  display: block;
  overflow: hidden;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.qd-rebuild .qb-recent__item:nth-child(even) {
  background: #fff;
}

.qd-rebuild .qb-recent__item:first-child {
  background: #fff;
  box-shadow: 0 2px 8px rgba(10, 163, 165, .12);
}

.qd-rebuild .qb-recent__item--enter {
  animation: qb-recent-enter .22s ease-out both;
}

.qd-rebuild .qb-recent__item--exit {
  animation: qb-recent-exit .18s ease-in forwards;
  pointer-events: none;
}

@keyframes qb-recent-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes qb-recent-exit {
  from { opacity: 1; max-block-size: 98px; }
  to { opacity: 0; max-block-size: 0; }
}

.qd-rebuild .qb-recent__row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  block-size: 100%;
  min-height: inherit;
  min-width: 0;
}

.qd-rebuild .qb-recent__ticket-box {
  flex: 0 0 clamp(122px, 30%, 172px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: clamp(8px, .65vh, 12px) clamp(10px, .85vw, 14px) 0;
  background:
    linear-gradient(180deg, rgba(248, 251, 253, .98) 0%, rgba(242, 247, 250, .98) 100%);
  border-inline-end: 1px solid #e2eaf2;
  position: relative;
  overflow: hidden;
}

.qd-rebuild .qb-recent__ticket-box:not(:has(.qb-recent__state:not([hidden]))) {
  justify-content: center;
  padding-block: clamp(8px, .65vh, 12px);
}

.qd-rebuild .qb-recent__num {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
  min-block-size: clamp(36px, 3.2vh, 44px);
  padding: 0 clamp(2px, .25vw, 4px);
  border: none;
  border-radius: 0;
  background: transparent;
  color: #0a1d42;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(20px, 1.65vw, 28px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.03em;
}

.qd-rebuild .qb-recent__item:first-child .qb-recent__num {
  color: #0a1d42;
}

.qd-rebuild .qb-recent__panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

.qd-rebuild .qb-recent__service-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: clamp(42px, 3.8vh, 52px);
  padding: clamp(8px, .7vh, 11px) clamp(10px, .85vw, 14px);
  border-block-end: 1px solid #e8eef4;
}

.qd-rebuild .qb-recent__service {
  flex: 1 1 auto;
  min-width: 0;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  color: #0a1d42;
  font-size: clamp(18px, 1.65vw, 26px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  display: block;
  overflow-x: hidden;
  overflow-y: visible;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-block: 2px;
}

.qd-rebuild .qb-recent__stats {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  min-height: clamp(38px, 3.4vh, 46px);
}

.qd-rebuild .qb-recent__stat {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(6px, .5vw, 8px);
  min-width: 0;
  padding: clamp(4px, .35vh, 6px) clamp(8px, .65vw, 12px);
}

html[dir="rtl"] .qd-rebuild .qb-recent__stat,
.qd-rebuild:dir(rtl) .qb-recent__stat,
.qd-rebuild[dir="rtl"] .qb-recent__stat {
  flex-direction: row;
  justify-content: flex-start;
  text-align: right;
}

html[dir="ltr"] .qd-rebuild .qb-recent__stat,
.qd-rebuild:dir(ltr) .qb-recent__stat,
.qd-rebuild[dir="ltr"] .qb-recent__stat {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
}

.qd-rebuild .qb-recent__stat-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(24px, 1.9vw, 28px);
  block-size: clamp(24px, 1.9vw, 28px);
  border-radius: 7px;
  color: #0a8ea0;
  background: rgba(10, 163, 165, .1);
}

.qd-rebuild .qb-recent__stat-icon svg {
  inline-size: clamp(14px, 1.05vw, 16px);
  block-size: clamp(14px, 1.05vw, 16px);
}

.qd-rebuild .qb-recent__stat-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

html[dir="rtl"] .qd-rebuild .qb-recent__stat-body,
.qd-rebuild:dir(rtl) .qb-recent__stat-body,
.qd-rebuild[dir="rtl"] .qb-recent__stat-body {
  align-items: flex-start;
  text-align: right;
}

html[dir="ltr"] .qd-rebuild .qb-recent__stat-body,
.qd-rebuild:dir(ltr) .qb-recent__stat-body,
.qd-rebuild[dir="ltr"] .qb-recent__stat-body {
  align-items: flex-start;
  text-align: left;
}

.qd-rebuild .qb-recent__stat-value {
  color: #0a1d42;
  font-family: "Inter", "Readex Pro", system-ui, sans-serif;
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  white-space: nowrap;
}

.qd-rebuild .qb-recent__stat--dest .qb-recent__stat-value {
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
}

.qd-rebuild .qb-recent__stat-label {
  display: none !important;
}

.qd-rebuild .qb-recent__stat-divider {
  display: none;
}

.qd-rebuild .qb-recent__stat[hidden],
.qd-rebuild .qb-recent__service-row[hidden],
.qd-rebuild .qb-recent__service[hidden] {
  display: none !important;
}

.qd-rebuild .qb-recent__stat--dest[hidden] + .qb-recent__stat-divider {
  display: none !important;
}

.qd-rebuild .qb-recent__stat--dest[hidden] ~ .qb-recent__stat--time {
  flex: 1 1 100%;
}

.qd-rebuild .qb-recent__state {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  margin-top: auto;
  margin-inline: calc(-1 * clamp(6px, .5vw, 10px));
  margin-block-end: 0;
  padding: clamp(4px, .35vh, 5px) clamp(4px, .35vw, 6px);
  border-radius: 0;
  border: none;
  border-block-start: 1px solid rgba(100, 116, 139, 0.12);
  background: rgba(248, 250, 252, 0.92);
  color: #475569;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(9px, .72vw, 11px);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qd-rebuild .qb-recent__state[hidden] {
  display: none !important;
}

.qd-rebuild .qb-recent__state--first {
  color: #475569;
  background: rgba(248, 250, 252, 0.92);
  border-block-start-color: rgba(100, 116, 139, 0.12);
}

.qd-rebuild .qb-recent__item:first-child .qb-recent__state--first {
  color: #fff;
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
  border-block-start-color: rgba(2, 132, 199, 0.35);
}

.qd-rebuild .qb-recent__state--final {
  color: #b91c1c;
  background: rgba(254, 242, 242, 0.95);
  border-block-start-color: rgba(239, 68, 68, 0.2);
}

.qd-rebuild .qb-recent__item:first-child .qb-recent__state--final {
  color: #fff;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  border-block-start-color: rgba(220, 38, 38, 0.35);
}

.qd-rebuild .qb-recent__state--recall,
.qd-rebuild .qb-recent__state--repeat {
  color: #0369a1;
  background: rgba(224, 242, 254, 0.95);
  border-block-start-color: rgba(14, 165, 233, 0.18);
}

.qd-rebuild .qb-recent__state--skipped {
  color: #b45309;
  background: rgba(255, 251, 235, 0.95);
  border-block-start-color: rgba(245, 158, 11, 0.18);
}

.qd-rebuild .qb-recent__state--serving {
  color: #047857;
  background: rgba(236, 253, 245, 0.95);
  border-block-start-color: rgba(16, 185, 129, 0.18);
}

.qd-rebuild .qb-recent__empty {
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  color: var(--qb-muted);
  font-size: clamp(10px, .85vw, 13px);
  font-weight: 600;
  text-align: center;
}

@media (max-width: 1180px) {
  .qd-rebuild .qb__grid {
    grid-template-columns: minmax(170px, .92fr) minmax(0, 2.05fr) minmax(215px, 1.1fr);
  }

  .qd-rebuild .qb-recent__num {
    font-size: clamp(20px, 1.65vw, 26px);
  }

  .qd-rebuild .qb-recent__ticket-box {
    flex-basis: clamp(76px, 26%, 100px);
  }
}


/* =====================================================================
   Waiting queue — high-clarity hallway cards
   ===================================================================== */
.qd-rebuild .qb-wait {
  background: #fff;
  border-color: #d8e1ea;
  box-shadow: 0 2px 6px rgba(7, 26, 61, .06);
}

.qd-rebuild .qb-wait__head {
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  min-height: clamp(58px, 5.5vh, 76px);
  padding: 0;
  background:
    linear-gradient(180deg, rgba(12, 110, 150, .09) 0%, rgba(255, 255, 255, .98) 68%),
    #fff;
  border-block-end: 1px solid #cdd8e4;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .75);
}

.qd-rebuild .qb-wait__title-wrap {
  order: 1;
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, .85vw, 14px);
  min-width: 0;
  padding: clamp(12px, 1.1vh, 17px) clamp(14px, 1.2vw, 20px);
}

.qd-rebuild .qb-wait__head-metric {
  order: 2;
  flex: 0 0 clamp(68px, 20%, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: clamp(8px, .75vh, 12px) clamp(10px, .85vw, 14px);
  background:
    linear-gradient(165deg, rgba(12, 110, 150, .08) 0%, rgba(12, 110, 150, .03) 48%, rgba(255, 255, 255, .4) 100%);
}

.qd-rebuild .qb-wait__head-metric-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .22vh, 4px);
  min-width: 0;
  max-width: 100%;
  text-align: center;
}

.qd-rebuild .qb-wait__head-metric-num {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(26px, 2.55vw, 38px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(12, 110, 150, .32);
}

.qd-rebuild .qb-wait__head-metric-num[data-count-length="3"] {
  font-size: clamp(22px, 2.1vw, 32px);
}

.qd-rebuild .qb-wait__head-metric-num[data-count-length="4"],
.qd-rebuild .qb-wait__head-metric-num[data-count-length="5"] {
  font-size: clamp(18px, 1.75vw, 26px);
  letter-spacing: -0.03em;
}

.qd-rebuild .qb-wait__head-metric-label {
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(9px, .72vw, 11px);
  font-weight: 700;
  line-height: 1.15;
  color: rgba(12, 110, 150, .46);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.qd-rebuild .qb-wait__title-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(3px, .35vh, 5px);
  min-width: 0;
}

.qd-rebuild .qb-wait__title {
  margin: 0;
  color: #061528;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(19px, 1.55vw, 28px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.qd-rebuild .qb-wait__estimate-note {
  margin: 0;
  color: #5a6b7d;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(11px, .88vw, 14px);
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.qd-rebuild .qb-wait__icon {
  flex-shrink: 0;
  inline-size: clamp(36px, 2.85vw, 44px);
  block-size: clamp(36px, 2.85vw, 44px);
  border-radius: 12px;
  color: #0c6e96;
  background: linear-gradient(145deg, rgba(12, 110, 150, .12) 0%, rgba(12, 110, 150, .06) 100%);
  border: 1px solid rgba(12, 110, 150, .18);
  box-shadow: 0 2px 8px rgba(12, 110, 150, .1);
}

.qd-rebuild .qb-wait__icon svg {
  inline-size: clamp(18px, 1.4vw, 22px);
  block-size: clamp(18px, 1.4vw, 22px);
}

.qd-rebuild .qb-wait__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  background: #e9eef3;
  overflow: hidden;
}

.qd-rebuild .qb-wait__list,
.qd-rebuild #next-list:not(:has(.next-list-empty)) {
  flex: 1 1 auto;
  min-height: 0;
  list-style: none;
  margin: 0;
  padding: clamp(3px, .32vh, 5px) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, .32vh, 5px);
  overflow: hidden;
  overscroll-behavior: none;
  background: #e9eef3;
}

/* ---------- Card shell — per-clinic soft accent ---------- */
.qd-rebuild .qb-wait .qd-next-card {
  flex: 0 0 auto;
  min-height: clamp(92px, 8.4vh, 116px);
  --qb-wait-card-min: 90;
  --qb-wait-accent: #5c7893;
  --qb-wait-accent-soft: rgba(92, 120, 147, 0.035);
  --qb-wait-accent-strip: rgba(92, 120, 147, 0.58);
  --qb-wait-accent-ticket: rgba(92, 120, 147, 0.08);
  --qb-wait-accent-icon: rgba(92, 120, 147, 0.12);
  padding: 0;
  border-radius: 0;
  background: #fff;
  border: none;
  border-inline-start: 5px solid var(--qb-wait-accent-strip);
  box-shadow: 0 1px 3px rgba(7, 26, 61, 0.05);
  display: block;
  overflow: hidden;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.qd-rebuild .qb-wait .qd-next-card--first {
  border-inline-start-width: 6px;
  box-shadow: 0 2px 7px color-mix(in srgb, var(--qb-wait-accent-strip) 22%, transparent);
}

.qd-rebuild .qb-wait .qd-next-card--entering {
  animation: qb-wait-enter .22s ease-out both;
}

.qd-rebuild .qb-wait .qd-next-card--leaving {
  opacity: 0;
  transition: opacity .18s ease;
}

@keyframes qb-wait-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Card layout: ticket box + info panel ---------- */
.qd-rebuild .qb-wait__row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  block-size: 100%;
  min-height: inherit;
  min-width: 0;
}

.qd-rebuild .qb-wait__ticket-box {
  flex: 0 0 clamp(94px, 28%, 130px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, .65vh, 12px) clamp(6px, .5vw, 10px);
  background:
    linear-gradient(180deg, rgba(248, 251, 253, .98) 0%, rgba(242, 247, 250, .98) 100%),
    var(--qb-wait-accent-ticket);
  border-inline-end: 1px solid color-mix(in srgb, var(--qb-wait-accent-strip) 18%, #e2eaf2);
  position: relative;
  overflow: hidden;
}

.qd-rebuild .qb-wait__ticket-box::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  inline-size: clamp(5px, .45vw, 8px);
  background: var(--qb-wait-accent-strip);
  opacity: .75;
}

.qd-rebuild .qb-wait .qd-next-card__number {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #0a1d42;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.04em;
}

.qd-rebuild .qb-wait .qd-next-card--first .qd-next-card__number {
  color: #061528;
}

.qd-rebuild .qb-wait__panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

.qd-rebuild .qb-wait__service-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: clamp(46px, 4.2vh, 58px);
  padding: clamp(8px, .7vh, 11px) clamp(10px, .85vw, 14px);
  border-block-end: 1px solid #e8eef4;
  background: linear-gradient(to inline-end, var(--qb-wait-accent-soft) 0%, rgba(255, 255, 255, 0) 42%);
}

.qd-rebuild .qb-wait .qd-next-card__service {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  color: #0a1d42;
  font-size: clamp(18px, 1.65vw, 26px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  display: block;
  overflow-x: hidden;
  overflow-y: visible;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-block: 2px;
}

.qd-rebuild .qb-wait__stats {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  min-height: clamp(42px, 3.8vh, 52px);
}

.qd-rebuild .qb-wait__stat {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(6px, .5vw, 8px);
  min-width: 0;
  padding: clamp(4px, .35vh, 6px) clamp(8px, .65vw, 12px);
}

html[dir="rtl"] .qd-rebuild .qb-wait__stat,
.qd-rebuild:dir(rtl) .qb-wait__stat,
.qd-rebuild[dir="rtl"] .qb-wait__stat {
  justify-content: flex-start;
  text-align: right;
}

html[dir="ltr"] .qd-rebuild .qb-wait__stat,
.qd-rebuild:dir(ltr) .qb-wait__stat,
.qd-rebuild[dir="ltr"] .qb-wait__stat {
  justify-content: flex-start;
  text-align: left;
}

.qd-rebuild .qb-wait__stat-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(24px, 1.9vw, 28px);
  block-size: clamp(24px, 1.9vw, 28px);
  border-radius: 7px;
  color: var(--qb-wait-accent, #0c6e96);
  background: var(--qb-wait-accent-icon, rgba(12, 110, 150, .1));
}

.qd-rebuild .qb-wait__stat-icon svg {
  inline-size: clamp(14px, 1.05vw, 16px);
  block-size: clamp(14px, 1.05vw, 16px);
}

.qd-rebuild .qb-wait__stat-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

html[dir="rtl"] .qd-rebuild .qb-wait__stat-body,
.qd-rebuild:dir(rtl) .qb-wait__stat-body,
.qd-rebuild[dir="rtl"] .qb-wait__stat-body {
  align-items: flex-start;
  text-align: right;
}

html[dir="ltr"] .qd-rebuild .qb-wait__stat-body,
.qd-rebuild:dir(ltr) .qb-wait__stat-body,
.qd-rebuild[dir="ltr"] .qb-wait__stat-body {
  align-items: flex-start;
  text-align: left;
}

.qd-rebuild .qb-wait__stat-value {
  color: #0a1d42;
  font-family: "Inter", "Readex Pro", system-ui, sans-serif;
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
  padding-bottom: 3px;
  white-space: nowrap;
}

.qd-rebuild .qb-wait__stat--ahead .qb-wait__stat-value {
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 800;
  line-height: 1.4;
  padding-bottom: 2px;
  white-space: nowrap;
}

.qd-rebuild .qb-wait__stat--ahead .qb-wait__stat-body:has(.qb-wait__stat-label:empty) .qb-wait__stat-value {
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 800;
}

.qd-rebuild .qb-wait__stat-label {
  color: #64748b;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(9px, .72vw, 11px);
  font-weight: 600;
  line-height: 1.4;
  padding-bottom: 2px;
  white-space: nowrap;
}

.qd-rebuild .qb-wait__stat-divider {
  flex: 0 0 1px;
  align-self: stretch;
  margin-block: clamp(6px, .5vh, 8px);
  background: #e2e8f0;
}

.qd-rebuild .qb-wait__stat[hidden],
.qd-rebuild .qb-wait__service-row[hidden] {
  display: none !important;
}

.qd-rebuild.queue-display--no-estimated-wait .qb-wait__stat--estimate,
.qd-rebuild.queue-display--no-estimated-wait .qb-wait__stat-divider {
  display: none !important;
}

.qd-rebuild.queue-display--no-estimated-wait .qb-wait__stat--ahead {
  flex: 1 1 100%;
}

/* Single-line clinic names — ellipsis by default, slow marquee when truncated */
.qd-rebuild .qb-clinic-name__track {
  display: inline-block;
  max-width: none;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.3;
}

.qd-rebuild .qd-next-card__service.is-marquee,
.qd-rebuild .qb-recent__service.is-marquee,
.qd-rebuild .qd-now__service.is-marquee,
.qd-rebuild .calls-cascade-board__service.is-marquee {
  text-overflow: clip;
}

.qd-rebuild .qd-next-card__service.is-marquee .qb-clinic-name__track,
.qd-rebuild .qb-recent__service.is-marquee .qb-clinic-name__track,
.qd-rebuild .qd-now__service.is-marquee .qb-clinic-name__track,
.qd-rebuild .calls-cascade-board__service.is-marquee .qb-clinic-name__track {
  padding-inline-end: 28px;
  animation: qb-clinic-name-marquee-ltr var(--marquee-duration, 12s) ease-in-out 2s infinite;
}

.qd-rebuild[dir="rtl"] .qd-next-card__service.is-marquee .qb-clinic-name__track,
.qd-rebuild[dir="rtl"] .qb-recent__service.is-marquee .qb-clinic-name__track,
.qd-rebuild[dir="rtl"] .qd-now__service.is-marquee .qb-clinic-name__track,
.qd-rebuild[dir="rtl"] .calls-cascade-board__service.is-marquee .qb-clinic-name__track,
.qd-rebuild :dir(rtl) .qd-next-card__service.is-marquee .qb-clinic-name__track,
.qd-rebuild :dir(rtl) .qb-recent__service.is-marquee .qb-clinic-name__track,
.qd-rebuild :dir(rtl) .qd-now__service.is-marquee .qb-clinic-name__track,
.qd-rebuild :dir(rtl) .calls-cascade-board__service.is-marquee .qb-clinic-name__track {
  animation-name: qb-clinic-name-marquee-rtl;
}

@keyframes qb-clinic-name-marquee-ltr {
  0%, 18% { transform: translateX(0); }
  82%, 100% { transform: translateX(calc(-1 * var(--marquee-shift, 0px))); }
}

@keyframes qb-clinic-name-marquee-rtl {
  0%, 18% { transform: translateX(0); }
  82%, 100% { transform: translateX(var(--marquee-shift, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .qd-rebuild .qd-next-card__service.is-marquee .qb-clinic-name__track,
  .qd-rebuild .qb-recent__service.is-marquee .qb-clinic-name__track,
  .qd-rebuild .qd-now__service.is-marquee .qb-clinic-name__track,
  .qd-rebuild .calls-cascade-board__service.is-marquee .qb-clinic-name__track {
    animation: none;
    transform: none;
  }
}

@media (max-width: 1180px) {
  .qd-rebuild .qb-wait .qd-next-card__number {
    font-size: clamp(20px, 1.65vw, 26px);
  }

  .qd-rebuild .qb-wait__ticket-box {
    flex-basis: clamp(92px, 26%, 120px);
  }
}


/* =====================================================================
   Waiting queue pager — visible footer with dots, page badge, progress
   ===================================================================== */
.qd-rebuild .qb-wait__pager {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 0.8vw, 12px);
  padding: clamp(8px, 0.75vw, 11px) clamp(12px, 1vw, 16px);
  border-block-start: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  min-block-size: 42px;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  cursor: pointer;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 999px;
  background: #cbd5e1;
  border: 0;
  padding: 0;
  transition: inline-size 0.2s ease, background-color 0.2s ease;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-dot.is-active {
  background: #0c6e96;
  inline-size: 18px;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 800;
  color: #0c6e96;
  background: rgba(12, 110, 150, 0.08);
  border: 1px solid rgba(12, 110, 150, 0.14);
  white-space: nowrap;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-range {
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-inline-size: 100%;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-progress {
  flex: 0 0 clamp(56px, 5vw, 88px);
  block-size: 4px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-progress-bar {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  transform: scaleX(0);
  transform-origin: inline-start;
  background: linear-gradient(90deg, #0c6e96, #0aa3a5);
  border-radius: inherit;
  will-change: transform;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-progress-bar.is-running {
  animation: qb-pager-progress var(--pager-duration, 10000ms) linear forwards;
}

@keyframes qb-pager-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.qd-rebuild #next-list[data-next-paging="1"] {
  overflow: hidden !important;
  scrollbar-width: none;
}

.qd-rebuild #next-list[data-next-paging="1"]::-webkit-scrollbar {
  display: none;
}

.qd-rebuild #next-list.is-page-swapping {
  pointer-events: none;
  --qb-wait-page-out-x: -14px;
  --qb-wait-page-in-x: 14px;
}

html[dir="rtl"] .qd-rebuild #next-list.is-page-swapping {
  --qb-wait-page-out-x: 14px;
  --qb-wait-page-in-x: -14px;
}

.qd-rebuild #next-list.qd-next__list--page-out {
  opacity: 0;
  transform: translateX(var(--qb-wait-page-out-x));
  transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.qd-rebuild #next-list.qd-next__list--page-in {
  animation: qb-wait-page-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes qb-wait-page-in {
  from {
    opacity: 0;
    transform: translateX(var(--qb-wait-page-in-x));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.qd-rebuild .qb-wait--paging .qb-wait__pager:not([hidden]) {
  display: flex !important;
}

/* =====================================================================
   Now-calling hero + current calls — reference mockup (authoritative)
   ===================================================================== */
.qd-rebuild {
  --qb-hero-purple: #5b3ebc;
  --qb-hero-wrap-bg: #f7f5fc;
  --qb-hero-wrap-border: #e8e0f4;
}

.qd-rebuild .qb__now-wrap {
  background:
    radial-gradient(circle at 8% 42%, rgba(91, 62, 188, 0.05) 0, transparent 38%),
    radial-gradient(circle, rgba(91, 62, 188, 0.07) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(180deg, #faf8ff 0%, var(--qb-hero-wrap-bg) 100%) !important;
  border: 1px solid var(--qb-hero-wrap-border) !important;
  box-shadow: 0 10px 28px rgba(91, 62, 188, 0.07) !important;
}

.qd-rebuild .qb__now {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: clamp(10px, 1vh, 14px) !important;
  padding:
    clamp(46px, 5.2vh, 58px)
    clamp(12px, 1.15vw, 22px)
    clamp(10px, 1vh, 16px) !important;
}

.qd-rebuild .qb__now #now-serving-card {
  flex: 1 1 56% !important;
  align-self: stretch !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-height: 0 !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.qd-rebuild .qb__now .qd-now__shell {
  background: #fff;
  border: 1px solid #ebe4f7;
  border-radius: clamp(14px, 1.15vw, 20px);
  box-shadow: 0 6px 22px rgba(91, 62, 188, 0.08);
  padding: clamp(16px, 1.8vh, 26px) clamp(18px, 1.8vw, 30px);
  inline-size: 100%;
  box-sizing: border-box;
}

.qd-rebuild .qb__now .qd-now__shell--idle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(100px, 14vh, 180px);
}

.qd-rebuild .qb__now .qd-now__idle-text {
  margin: 0;
  color: #64748b;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(20px, 2vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.qd-rebuild .qb__now .qd-now__idle {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  padding: 0;
}

.qd-rebuild .qb__now .qd-now__hero-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(14px, 1.5vw, 26px) !important;
  inline-size: 100%;
  min-inline-size: 0;
}

.qd-rebuild .qb__now .qd-now__ticket-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
  padding-inline: clamp(8px, 0.8vw, 14px);
  border-inline-end: 1px solid #e8edf3;
}

.qd-rebuild .qb__now .qd-now__info-pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1vh, 14px);
  min-inline-size: 0;
  text-align: center;
  border: 0 !important;
  padding: 0 !important;
  max-inline-size: none !important;
}

.qd-rebuild .qb__now .qd-now__number,
.qd-rebuild .qb__now #now-ticket-number {
  color: var(--qb-hero-purple) !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: clamp(56px, 6.2vw, 104px) !important;
  font-weight: 900 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.04em !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.qd-rebuild .qb__now .qd-now__service,
.qd-rebuild .qb__now #now-ticket-service {
  margin: 0 !important;
  color: var(--qb-hero-purple) !important;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif !important;
  font-size: clamp(19px, 1.7vw, 30px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  max-inline-size: 100%;
}

.qd-rebuild .qb__now .qd-now__cta,
.qd-rebuild .qb__now #now-ticket-destination {
  display: inline-flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.45vw, 8px);
  margin: 0;
  padding: clamp(8px, 0.7vh, 11px) clamp(14px, 1.1vw, 20px) !important;
  border-radius: 999px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f4f6f9 !important;
  max-inline-size: 100%;
}

.qd-rebuild .qb__now .qd-now__cta-lead {
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

.qd-rebuild .qb__now .qd-now__cta-room {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.qd-rebuild .qb__now .qd-now__cta-pin {
  display: inline-flex;
  color: var(--qb-hero-purple);
}

.qd-rebuild .qb__now .qd-now__cta-target {
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 800;
  color: var(--qb-hero-purple);
  white-space: nowrap;
}

.qd-rebuild .qb__now .calls-cascade-board {
  flex: 0 0 auto !important;
  min-height: clamp(117px, 19.8vh, 198px) !important;
  max-height: 38% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(7px, 0.72vh, 11px) !important;
}

.qd-rebuild .qb__now .calls-cascade-board[hidden] {
  display: none !important;
}

.qd-rebuild .calls-cascade-board__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1vw, 16px);
  padding-block-end: clamp(8px, 0.75vh, 11px);
  border-block-end: 1px solid #e2e8f0;
}

.qd-rebuild .calls-cascade-board__head-title {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 0.7vw, 12px);
  min-inline-size: 0;
}

.qd-rebuild .calls-cascade-board__head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(32px, 2.4vw, 38px);
  block-size: clamp(32px, 2.4vw, 38px);
  border-radius: 10px;
  border: 1px solid #e8e0f4;
  background: #fff;
  color: var(--qb-hero-purple);
  flex-shrink: 0;
}

.qd-rebuild .calls-cascade-board__title {
  margin: 0;
  color: var(--qb-hero-purple);
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(17px, 1.3vw, 23px);
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.qd-rebuild .calls-cascade-board__count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: clamp(5px, 0.45vh, 7px) clamp(11px, 0.9vw, 15px);
  border-radius: 999px;
  border: 1px solid rgba(20, 184, 166, 0.28);
  background: rgba(20, 184, 166, 0.08);
  color: #0f766e;
}

.qd-rebuild .calls-cascade-board__count-icon {
  display: inline-flex;
  color: #14b8a6;
}

.qd-rebuild .calls-cascade-board__count-text {
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
  white-space: nowrap;
}

.qd-rebuild .calls-cascade-board__track-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.qd-rebuild .calls-cascade-board__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(7px, 0.68vw, 11px);
  align-items: stretch;
  min-height: 0;
  block-size: 100%;
}

.qd-rebuild .calls-cascade-board__cell {
  --call-accent: #14b8a6;
  --call-accent-soft: rgba(20, 184, 166, 0.1);
  --call-accent-border: rgba(20, 184, 166, 0.45);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  min-inline-size: 0;
  min-block-size: clamp(97px, 12.6vh, 133px);
  padding: 0;
  border-radius: clamp(11px, 0.86vw, 14px);
  border: 1px solid #e4eaf2;
  border-inline-start: 4px solid var(--call-accent);
  background: #fff;
  box-shadow: 0 3px 12px rgba(16, 36, 65, 0.05);
  overflow: hidden;
  text-align: center;
}

.qd-rebuild .calls-cascade-board__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(5px, 0.45vh, 7px);
  min-height: 0;
  min-inline-size: 0;
  padding: clamp(8px, 0.72vh, 10px) clamp(7px, 0.63vw, 10px) clamp(4px, 0.36vh, 6px);
  box-sizing: border-box;
}

.qd-rebuild .calls-cascade-board__cell--lead {
  border-color: var(--call-accent-border);
  border-inline-start-width: 5px;
  background: color-mix(in srgb, var(--call-accent) 6%, #fff);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--call-accent) 14%, transparent);
}

.qd-rebuild .calls-cascade-board__status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0;
  padding: 2px clamp(9px, 0.76vw, 12px);
  border-radius: 999px;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(9px, 0.7vw, 11px);
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}

.qd-rebuild .calls-cascade-board__status--now {
  color: #fff;
  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
  border: 0;
}

.qd-rebuild .calls-cascade-board__status--called {
  color: #0a5a8a;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.22);
}

.qd-rebuild .calls-cascade-board__number {
  flex: 0 0 auto;
  color: var(--call-accent) !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: clamp(22px, 1.8vw, 31px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  padding-block: 1px;
}

.qd-rebuild .calls-cascade-board__service {
  flex: 0 1 auto;
  display: block;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding-inline: 2px;
  color: #0a1d42;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(10px, 0.81vw, 13px);
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qd-rebuild .calls-cascade-board__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  inline-size: 100%;
  margin-block-start: auto;
  padding: clamp(6px, 0.58vh, 8px) clamp(7px, 0.63vw, 9px);
  background: var(--call-accent-soft);
  border-block-start: 1px solid color-mix(in srgb, var(--call-accent) 12%, #fff);
}

.qd-rebuild .calls-cascade-board__foot-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--call-accent);
}

.qd-rebuild .calls-cascade-board__foot-text {
  min-inline-size: 0;
  color: #0a1d42;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(9px, 0.74vw, 12px);
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qd-rebuild .calls-cascade-board__cell--enter {
  animation: qb-cascade-enter 0.28s ease-out both;
}

@keyframes qb-cascade-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  .qd-rebuild .calls-cascade-board__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .qd-rebuild .qb__now .qd-now__hero-layout {
    grid-template-columns: 1fr !important;
  }

  .qd-rebuild .qb__now .qd-now__ticket-pane {
    border-inline-end: 0;
    border-block-end: 1px solid #e8edf3;
    padding-block-end: clamp(12px, 1.2vh, 16px);
  }
}

@media (max-height: 760px) {
  .qd-rebuild .qb__now .qd-now__number,
  .qd-rebuild .qb__now #now-ticket-number {
    font-size: clamp(42px, 5vw, 72px) !important;
  }

  .qd-rebuild .calls-cascade-board__track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .qd-rebuild .calls-cascade-board__cell {
    min-block-size: clamp(83px, 10.8vh, 113px);
  }
}

/* Recent calls sidebar — display board rows (mirrors waiting list, kiosk-safe) */
.qd-rebuild .qb-recent {
  background: #fff;
  border-color: #d8e1ea;
  box-shadow: 0 2px 6px rgba(7, 26, 61, .06);
}

.qd-rebuild .qb-recent__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  min-height: clamp(54px, 5.2vh, 72px);
  padding: 0;
  background:
    linear-gradient(180deg, rgba(10, 163, 165, .09) 0%, rgba(255, 255, 255, .98) 68%),
    #fff;
  border-block-end: 1px solid #cdd8e4;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .75);
}

.qd-rebuild .qb-recent__title-wrap {
  display: flex;
  align-items: center;
  gap: clamp(10px, .85vw, 14px);
  flex: 1 1 auto;
  min-width: 0;
  padding: clamp(12px, 1.1vh, 17px) clamp(14px, 1.2vw, 20px);
}

.qd-rebuild .qb-recent__hint {
  display: none;
}

.qd-rebuild .qb-recent__title {
  margin: 0;
  color: #061528;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(19px, 1.55vw, 28px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.qd-rebuild .qb-recent__icon {
  inline-size: clamp(36px, 2.85vw, 44px);
  block-size: clamp(36px, 2.85vw, 44px);
  border-radius: 12px;
  color: #0a8ea0;
  background: linear-gradient(145deg, rgba(10, 163, 165, .12) 0%, rgba(10, 163, 165, .06) 100%);
  border: 1px solid rgba(10, 163, 165, .18);
  box-shadow: 0 2px 8px rgba(10, 163, 165, .1);
}

.qd-rebuild .qb-recent__count {
  flex: 0 0 clamp(92px, 24%, 170px) !important;
  align-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(6px, 0.55vh, 10px) clamp(8px, 0.7vw, 14px) !important;
  background:
    linear-gradient(180deg, rgba(10, 163, 165, 0.065), rgba(255, 255, 255, 0.42)) !important;
  border-inline-start: 1px solid rgba(203, 216, 226, 0.74) !important;
  border-radius: 0 !important;
  border: none !important;
}

.qd-rebuild .qb-recent__count-icon {
  display: none !important;
}

.qd-rebuild .qb-recent__count-text {
  font-family: "Readex Pro", "Inter", system-ui, sans-serif !important;
  color: rgba(10, 142, 160, 0.68) !important;
  font-size: clamp(12px, .98vw, 16px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.qd-rebuild .qb-recent__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: #e9eef3;
}

.qd-rebuild .qb-recent__list {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  list-style: none;
  margin: 0;
  padding: clamp(3px, .32vh, 5px) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, .32vh, 5px);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: #e9eef3;
  position: relative;
}

.qd-rebuild .qb-recent__pager {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, .6vw, 10px);
  min-height: clamp(28px, 2.8vh, 38px);
  padding: clamp(5px, .45vh, 8px) clamp(10px, .85vw, 14px);
  background: #f8fbfd;
  border-block-start: 1px solid #dce7ef;
  color: #334155;
  font-family: "Readex Pro", "Inter", system-ui, sans-serif;
  font-size: clamp(10px, .82vw, 13px);
  font-weight: 800;
  line-height: 1.2;
}

.qd-rebuild .qb-recent__pager[hidden] {
  display: none !important;
}

.qd-rebuild .qb-recent__pager-text,
.qd-rebuild .qb-recent__pager-range {
  min-width: 0;
  white-space: nowrap;
}

.qd-rebuild .qb-recent__pager-range {
  color: #64748b;
  font-weight: 700;
}

.qd-rebuild .qb-recent__pager-dots {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}

.qd-rebuild .qb-recent__pager-dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 999px;
  background: #cbd5e1;
}

.qd-rebuild .qb-recent__pager-dot.is-active {
  inline-size: 16px;
  background: #0a8ea0;
}

.qd-rebuild .qb-recent__item {
  flex: 0 0 auto;
  min-height: clamp(76px, 7.2vh, 98px);
  max-height: none;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.qd-rebuild .qb-recent__card {
  --call-accent-soft: rgba(20, 184, 166, 0.08);
  flex: 1 1 auto;
  min-height: 0;
  min-inline-size: 0;
  inline-size: 100%;
  padding: 0;
  border-radius: 0;
  background: #fff;
  border: none;
  box-shadow: 0 1px 4px rgba(7, 26, 61, 0.06);
  overflow: hidden;
}

.qd-rebuild .qb-recent__item:first-child .qb-recent__card {
  box-shadow: 0 2px 8px rgba(7, 26, 61, 0.08);
}

.qd-rebuild .qb-recent__row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  block-size: 100%;
  min-height: inherit;
  min-width: 0;
}

.qd-rebuild .qb-recent__ticket-box {
  flex: 0 0 clamp(92px, 30%, 128px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: clamp(8px, .65vh, 12px) clamp(8px, .65vw, 12px) 0;
  background: linear-gradient(180deg, rgba(248, 251, 253, .98) 0%, rgba(242, 247, 250, .98) 100%);
  border-inline-end: 1px solid #e8eef4;
  position: relative;
  overflow: hidden;
}

.qd-rebuild .qb-recent__ticket-box:not(:has(.qb-recent__badge:not([hidden]))) {
  justify-content: center;
  padding-block: clamp(8px, .65vh, 12px);
}

.qd-rebuild .qb-recent__num {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 0;
  min-block-size: clamp(38px, 3.4vh, 48px);
  padding: 0 clamp(2px, .25vw, 4px);
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--call-accent) !important;
  font-family: "Inter", system-ui, sans-serif !important;
  font-size: clamp(24px, 2.05vw, 36px) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1 !important;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: center;
}

.qd-rebuild .qb-recent__item:first-child .qb-recent__num {
  color: var(--call-accent) !important;
}

.qd-rebuild .qb-recent__panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

.qd-rebuild .qb-recent__service-row {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: clamp(44px, 4vh, 56px);
  padding: clamp(8px, .7vh, 12px) clamp(10px, .85vw, 14px);
  border-block-end: 1px solid #e8eef4;
  background: #fff;
}

html[dir="rtl"] .qd-rebuild .qb-recent__service-row,
.qd-rebuild[dir="rtl"] .qb-recent__service-row {
  justify-content: flex-start;
}

.qd-rebuild .qb-recent__service {
  flex: 1 1 auto;
  min-width: 0;
  color: #0a1d42;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(17px, 1.45vw, 24px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[dir="rtl"] .qd-rebuild .qb-recent__service,
.qd-rebuild[dir="rtl"] .qb-recent__service {
  text-align: right;
}

.qd-rebuild .qb-recent__service[hidden] {
  display: none !important;
}

.qd-rebuild .qb-recent__stats {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  min-height: clamp(36px, 3.2vh, 44px);
}

.qd-rebuild .qb-recent__stat {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(6px, .5vw, 8px);
  min-width: 0;
  padding: clamp(4px, .35vh, 6px) clamp(8px, .65vw, 12px);
}

html[dir="rtl"] .qd-rebuild .qb-recent__stat,
.qd-rebuild[dir="rtl"] .qb-recent__stat {
  justify-content: flex-start;
  text-align: right;
}

.qd-rebuild .qb-recent__stat-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(26px, 2vw, 32px);
  block-size: clamp(26px, 2vw, 32px);
  border-radius: 8px;
  color: var(--call-accent);
  background: color-mix(in srgb, var(--call-accent) 12%, #fff);
}

.qd-rebuild .qb-recent__stat-icon svg {
  inline-size: clamp(15px, 1.1vw, 18px);
  block-size: clamp(15px, 1.1vw, 18px);
}

.qd-rebuild .qb-recent__stat-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.qd-rebuild .qb-recent__stat-value {
  color: #0a1d42;
  font-family: "Inter", "Readex Pro", system-ui, sans-serif;
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qd-rebuild .qb-recent__stat--dest .qb-recent__stat-value {
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
}

.qd-rebuild .qb-recent__stat-divider {
  display: none;
}

.qd-rebuild .qb-recent__stat[hidden],
.qd-rebuild .qb-recent__stat-divider[hidden],
.qd-rebuild .qb-recent__service-row[hidden] {
  display: none !important;
}

.qd-rebuild .qb-recent__stat--dest[hidden] + .qb-recent__stat-divider {
  display: none !important;
}

.qd-rebuild .qb-recent__stat--dest[hidden] ~ .qb-recent__stat--time {
  flex: 1 1 100%;
}

.qd-rebuild .qb-recent__message {
  align-items: center;
  color: #475569;
  display: flex;
  font-size: clamp(10px, .78vw, 12px);
  font-weight: 800;
  gap: 6px;
  line-height: 1.35;
  margin: 4px 0 0;
  min-width: 0;
}

.qd-rebuild .qb-recent__message::before {
  background: currentColor;
  border-radius: 999px;
  content: "";
  flex: 0 0 6px;
  height: 6px;
  opacity: .45;
  width: 6px;
}

.qd-rebuild .qb-recent__message[hidden] {
  display: none !important;
}

.qd-rebuild .qb-recent__item[data-call-status="final"] .qb-recent__message {
  color: var(--qb-call-final-ink);
}

.qd-rebuild .qb-recent__item[data-call-status="skipped"] .qb-recent__message {
  color: #92400e;
}

.qd-rebuild .qb-recent__item[data-call-status="serving"] .qb-recent__message {
  color: #047857;
}

.qd-rebuild .qb-recent__item[data-call-status="completed"] .qb-recent__message {
  color: #047857;
}

.qd-rebuild .qb-recent__item[data-call-status="no_show"] .qb-recent__message {
  color: #92400e;
}

.qd-rebuild .qb-recent__item[data-call-status="final_timeout"] .qb-recent__message {
  color: #92400e;
}

.qd-rebuild .qb-recent__badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  margin-top: auto;
  margin-inline: calc(-1 * clamp(4px, .35vw, 6px));
  margin-block-end: 0;
  padding: clamp(4px, .35vh, 5px) clamp(5px, .4vw, 7px);
  border-radius: 0;
  border: none;
  border-block-start: 1px solid rgba(100, 116, 139, 0.12);
  background: rgba(248, 250, 252, 0.92);
  color: #475569;
  font-family: "Readex Pro", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(10px, .82vw, 12px);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qd-rebuild .qb-recent__badge[hidden] {
  display: none !important;
}

.qd-rebuild .qb-recent__badge--first {
  color: #475569;
  background: rgba(248, 250, 252, 0.92);
}

.qd-rebuild .qb-recent__item:first-child .qb-recent__badge--first {
  color: #fff;
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
  border-block-start-color: rgba(2, 132, 199, 0.35);
}

.qd-rebuild .qb-recent__badge--final {
  color: #b91c1c;
  background: rgba(254, 242, 242, 0.95);
  border-block-start-color: rgba(239, 68, 68, 0.2);
}

.qd-rebuild .qb-recent__item:first-child .qb-recent__badge--final {
  color: #fff;
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  border-block-start-color: rgba(220, 38, 38, 0.35);
}

.qd-rebuild .qb-recent__badge--recall,
.qd-rebuild .qb-recent__badge--repeat {
  color: #0369a1;
  background: rgba(224, 242, 254, 0.95);
  border-block-start-color: rgba(14, 165, 233, 0.18);
}

.qd-rebuild .qb-recent__badge--skipped {
  color: #b45309;
  background: rgba(255, 251, 235, 0.95);
}

.qd-rebuild .qb-recent__badge--serving {
  color: #047857;
  background: rgba(236, 253, 245, 0.95);
}

.qd-rebuild .qb-recent__badge--completed {
  color: #047857;
  background: rgba(236, 253, 245, 0.95);
}

.qd-rebuild .qb-recent__badge--no_show {
  color: #b45309;
  background: rgba(255, 251, 235, 0.95);
}

.qd-rebuild .qb-recent__badge--final_timeout {
  color: #b45309;
  background: rgba(255, 251, 235, 0.95);
}

.qd-rebuild .qb-recent__item--enter {
  animation: qb-recent-row-enter 0.22s ease-out both;
}

.qd-rebuild .qb-recent__item--exit {
  animation: qb-recent-row-exit 0.18s ease-in forwards;
  pointer-events: none;
}

@keyframes qb-recent-row-enter {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@keyframes qb-recent-row-exit {
  from { opacity: 1; max-block-size: 110px; }
  to { opacity: 0; max-block-size: 0; margin-block: 0; }
}

.qd-rebuild .qb-recent__empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  color: var(--qb-muted);
  font-size: clamp(12px, .95vw, 15px);
  font-weight: 600;
  text-align: center;
}

@media (max-height: 760px) {
  .qd-rebuild .qb-recent__num {
    font-size: clamp(20px, 1.75vw, 28px) !important;
  }

  .qd-rebuild .qb-recent__service {
    font-size: clamp(14px, 1.2vw, 18px);
  }

  .qd-rebuild .qb-recent__stat-value {
    font-size: clamp(13px, 1.05vw, 16px);
  }
}

/* Hero gains space — recent cards removed from centre rail */
.qd-rebuild .qb__now:not(.qd-pro__now--multi) .calls-cascade-board {
  min-height: 0 !important;
  max-height: none !important;
}

.qd-rebuild .qb__now:not(.qd-pro__now--multi) {
  padding-block-start: clamp(36px, 3.8vh, 52px) !important;
}

.qd-rebuild .qb__now:not(.qd-pro__now--multi) .qd-now__active .qd-now__shell {
  padding-block-start: clamp(16px, 1.8vh, 26px);
}

/* Final polish: simultaneous-only centre rail */
.qd-rebuild .qb__now.qd-pro__now--multi {
  padding-block-start: clamp(62px, 6.4vh, 78px) !important;
}

.qd-rebuild .qb__now .qd-now__number,
.qd-rebuild .qb__now #now-ticket-number {
  font-size: clamp(50px, 5.4vw, 92px) !important;
}

.qd-rebuild .qb__now-wrap > .qb__now-title,
.qd-rebuild .qb__now-wrap > .qb__now-phase-badge,
.qd-rebuild .qb__now-wrap > #now-ticket-phase-badge {
  max-inline-size: min(34%, 210px);
  padding: clamp(5px, 0.48vw, 8px) clamp(12px, 1.1vw, 22px);
  font-size: clamp(11px, 0.92vw, 17px);
}

.qd-rebuild .calls-cascade-board__cell {
  --call-accent-strip: 5px;
  min-block-size: clamp(92px, 11.7vh, 126px);
}

.qd-rebuild .calls-cascade-board__body {
  justify-content: center;
  gap: clamp(6px, 0.58vh, 9px);
  padding-block-start: clamp(7px, 0.65vh, 10px);
  padding-block-end: clamp(5px, 0.48vh, 7px);
}

.qd-rebuild .calls-cascade-board__status {
  min-block-size: clamp(18px, 1.75vh, 24px);
  padding-block: 1px;
  padding-inline: clamp(10px, 0.9vw, 14px);
  font-size: clamp(8px, 0.64vw, 10px);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.qd-rebuild .calls-cascade-board__number {
  font-size: clamp(20px, 1.65vw, 28px) !important;
  line-height: 1 !important;
}

.qd-rebuild .calls-cascade-board__service {
  font-size: clamp(9px, 0.76vw, 12px);
  line-height: 1.16;
}

.qd-rebuild .calls-cascade-board__foot {
  align-self: stretch;
  inline-size: calc(100% + var(--call-accent-strip));
  margin-inline-start: calc(-1 * var(--call-accent-strip));
  box-sizing: border-box;
  padding-block: clamp(6px, 0.58vh, 8px);
  padding-inline: clamp(8px, 0.7vw, 10px);
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--call-accent) 9%, transparent);
}

.qd-rebuild .calls-cascade-board__cell--lead .calls-cascade-board__foot {
  background: color-mix(in srgb, var(--call-accent) 15%, #fff);
}

/* Long clinic names in the active call and current-call cards should auto-marquee. */
.qd-rebuild .qb__now .qd-now__service,
.qd-rebuild .qb__now #now-ticket-service,
.qd-rebuild .calls-cascade-board__service {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-inline-size: 0;
}

.qd-rebuild .qb__now .qd-now__service .qb-clinic-name__track,
.qd-rebuild .qb__now #now-ticket-service .qb-clinic-name__track,
.qd-rebuild .calls-cascade-board__service .qb-clinic-name__track {
  line-height: inherit;
}

/* Current-call phase contract: normal=green, repeat=purple, final=settings gold. */
.qd-rebuild {
  --qb-call-normal: #16a34a;
  --qb-call-normal-dark: #15803d;
  --qb-call-normal-soft: #ecfdf5;
  --qb-call-normal-border: rgba(22, 163, 74, 0.34);
  --qb-call-repeat: var(--qb-repeat-call, var(--qb-recall, #6d4bc3));
  --qb-call-repeat-dark: #5a3daf;
  --qb-call-repeat-soft: var(--qb-recall-bg, #f2eeff);
  --qb-call-final-soft: color-mix(in srgb, var(--qb-final-call) 11%, #fff);
  --qb-call-final-ink: color-mix(in srgb, var(--qb-final-call) 86%, #5f3f00);
}

.qd-rebuild .qb__now-wrap:not(:has(#now-serving-card.qd-now--reminder)):not(:has(#now-serving-card.qd-now--final)) {
  background:
    radial-gradient(circle at 8% 42%, rgba(22, 163, 74, 0.05) 0, transparent 38%),
    radial-gradient(circle, rgba(22, 163, 74, 0.06) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(180deg, #fbfffd 0%, #f0fdf4 100%) !important;
  border-color: color-mix(in srgb, var(--qb-call-normal) 20%, #dbe7de) !important;
  box-shadow: 0 10px 28px rgba(22, 163, 74, 0.07) !important;
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) {
  background:
    radial-gradient(circle at 8% 42%, color-mix(in srgb, var(--qb-call-repeat) 7%, transparent) 0, transparent 38%),
    radial-gradient(circle, color-mix(in srgb, var(--qb-call-repeat) 8%, transparent) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(180deg, #fbfaff 0%, var(--qb-call-repeat-soft) 100%) !important;
  border-color: color-mix(in srgb, var(--qb-call-repeat) 24%, #e5ddf7) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--qb-call-repeat) 9%, transparent) !important;
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) {
  background:
    radial-gradient(circle at 8% 42%, color-mix(in srgb, var(--qb-final-call) 8%, transparent) 0, transparent 38%),
    radial-gradient(circle, color-mix(in srgb, var(--qb-final-call) 8%, transparent) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(180deg, #fffdfa 0%, var(--qb-call-final-soft) 100%) !important;
  border-color: color-mix(in srgb, var(--qb-final-call) 26%, #eadfca) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--qb-final-call) 10%, transparent) !important;
}

.qd-rebuild .qb__now #now-serving-card:not(.qd-now--reminder):not(.qd-now--final) .qd-now__number,
.qd-rebuild .qb__now #now-serving-card:not(.qd-now--reminder):not(.qd-now--final) #now-ticket-number,
.qd-rebuild .qb__now #now-serving-card:not(.qd-now--reminder):not(.qd-now--final) .qd-now__service,
.qd-rebuild .qb__now #now-serving-card:not(.qd-now--reminder):not(.qd-now--final) #now-ticket-service,
.qd-rebuild .qb__now #now-serving-card:not(.qd-now--reminder):not(.qd-now--final) .qd-now__cta-target,
.qd-rebuild .qb__now #now-serving-card:not(.qd-now--reminder):not(.qd-now--final) .qd-now__cta-pin {
  color: var(--qb-call-normal) !important;
}

.qd-rebuild .qb__now #now-serving-card.qd-now--reminder .qd-now__number,
.qd-rebuild .qb__now #now-serving-card.qd-now--reminder #now-ticket-number,
.qd-rebuild .qb__now #now-serving-card.qd-now--reminder .qd-now__service,
.qd-rebuild .qb__now #now-serving-card.qd-now--reminder #now-ticket-service,
.qd-rebuild .qb__now #now-serving-card.qd-now--reminder .qd-now__cta-target,
.qd-rebuild .qb__now #now-serving-card.qd-now--reminder .qd-now__cta-pin {
  color: var(--qb-call-repeat) !important;
}

.qd-rebuild .qb__now #now-serving-card.qd-now--final .qd-now__number,
.qd-rebuild .qb__now #now-serving-card.qd-now--final #now-ticket-number,
.qd-rebuild .qb__now #now-serving-card.qd-now--final .qd-now__service,
.qd-rebuild .qb__now #now-serving-card.qd-now--final #now-ticket-service,
.qd-rebuild .qb__now #now-serving-card.qd-now--final .qd-now__cta-target,
.qd-rebuild .qb__now #now-serving-card.qd-now--final .qd-now__cta-pin {
  color: var(--qb-call-final-ink) !important;
}

.qd-rebuild .qb__now #now-serving-card:not(.qd-now--reminder):not(.qd-now--final) .qd-now__cta,
.qd-rebuild .qb__now #now-serving-card:not(.qd-now--reminder):not(.qd-now--final) #now-ticket-destination {
  background: color-mix(in srgb, var(--qb-call-normal) 7%, #fff) !important;
  border-color: color-mix(in srgb, var(--qb-call-normal) 18%, #dce8e1) !important;
}

.qd-rebuild .qb__now #now-serving-card.qd-now--reminder .qd-now__cta,
.qd-rebuild .qb__now #now-serving-card.qd-now--reminder #now-ticket-destination {
  background: color-mix(in srgb, var(--qb-call-repeat) 7%, #fff) !important;
  border-color: color-mix(in srgb, var(--qb-call-repeat) 18%, #e6def8) !important;
}

.qd-rebuild .qb__now #now-serving-card.qd-now--final .qd-now__cta,
.qd-rebuild .qb__now #now-serving-card.qd-now--final #now-ticket-destination {
  background: color-mix(in srgb, var(--qb-final-call) 8%, #fff) !important;
  border-color: color-mix(in srgb, var(--qb-final-call) 18%, #eadfca) !important;
}

.qd-rebuild .qb__now-wrap > .qb__now-title::before {
  background-color: var(--qb-call-normal) !important;
  background-image: linear-gradient(158deg, var(--qb-call-normal-dark) 0%, var(--qb-call-normal) 54%, #22c55e 100%) !important;
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) > .qb__now-title::before,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) > .qb__now-phase-badge::before,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--reminder) > #now-ticket-phase-badge::before {
  background-color: var(--qb-call-repeat) !important;
  background-image: linear-gradient(158deg, var(--qb-call-repeat-dark) 0%, var(--qb-call-repeat) 52%, #8b5cf6 100%) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--qb-call-repeat) 25%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}

.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) > .qb__now-title::before,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) > .qb__now-phase-badge::before,
.qd-rebuild .qb__now-wrap:has(#now-serving-card.qd-now--final) > #now-ticket-phase-badge::before {
  background-color: var(--qb-final-call) !important;
  background-image: linear-gradient(158deg, color-mix(in srgb, var(--qb-final-call) 74%, #5f3f00) 0%, var(--qb-final-call) 54%, color-mix(in srgb, var(--qb-final-call) 72%, #fff) 100%) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--qb-final-call) 25%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}

.qd-rebuild .qb__now.qd-pro__now--multi {
  gap: clamp(8px, 0.78vh, 12px) !important;
  padding-block-start: clamp(48px, 5.1vh, 64px) !important;
}

.qd-rebuild .qb__now.qd-pro__now--multi .qd-now__active .qd-now__shell {
  padding-block: clamp(14px, 1.45vh, 22px);
}

.qd-rebuild .qb__now.qd-pro__now--multi .calls-cascade-board {
  flex: 0 1 clamp(112px, 17vh, 158px) !important;
  min-height: clamp(112px, 17vh, 158px) !important;
  max-height: clamp(132px, 21vh, 184px) !important;
  margin-block-start: 0 !important;
}

.qd-rebuild .qb__now.qd-pro__now--multi .calls-cascade-board__cell {
  min-block-size: clamp(78px, 9.4vh, 104px) !important;
}

.qd-rebuild .calls-cascade-board__cell--lead {
  --call-accent: var(--qb-call-normal) !important;
  --call-accent-soft: color-mix(in srgb, var(--qb-call-normal) 11%, transparent) !important;
  --call-accent-border: var(--qb-call-normal-border) !important;
}

.qd-rebuild .calls-cascade-board__cell--kind-recall {
  --call-accent: var(--qb-call-repeat) !important;
  --call-accent-soft: color-mix(in srgb, var(--qb-call-repeat) 12%, transparent) !important;
  --call-accent-border: color-mix(in srgb, var(--qb-call-repeat) 42%, transparent) !important;
}

.qd-rebuild .calls-cascade-board__cell--kind-final {
  --call-accent: var(--qb-final-call) !important;
  --call-accent-soft: color-mix(in srgb, var(--qb-final-call) 12%, transparent) !important;
  --call-accent-border: color-mix(in srgb, var(--qb-final-call) 44%, transparent) !important;
}

.qd-rebuild .calls-cascade-board__cell--lead .calls-cascade-board__status--now {
  background: linear-gradient(135deg, var(--qb-call-normal-dark) 0%, var(--qb-call-normal) 100%) !important;
}

.qd-rebuild .calls-cascade-board__cell--kind-recall .calls-cascade-board__status--now {
  background: linear-gradient(135deg, var(--qb-call-repeat-dark) 0%, var(--qb-call-repeat) 100%) !important;
}

.qd-rebuild .calls-cascade-board__cell--kind-final .calls-cascade-board__status--now {
  background: linear-gradient(135deg, color-mix(in srgb, var(--qb-final-call) 82%, #5f3f00) 0%, var(--qb-final-call) 100%) !important;
}

.qd-rebuild .calls-cascade-board--reminder .calls-cascade-board__head-icon,
.qd-rebuild .calls-cascade-board--reminder .calls-cascade-board__title {
  color: var(--qb-call-repeat) !important;
}

.qd-rebuild .calls-cascade-board--reminder .calls-cascade-board__count {
  color: var(--qb-call-repeat-dark) !important;
  background: color-mix(in srgb, var(--qb-call-repeat) 9%, #fff) !important;
  border-color: color-mix(in srgb, var(--qb-call-repeat) 24%, transparent) !important;
}

.qd-rebuild .calls-cascade-board--final .calls-cascade-board__head-icon,
.qd-rebuild .calls-cascade-board--final .calls-cascade-board__title {
  color: var(--qb-call-final-ink) !important;
}

.qd-rebuild .calls-cascade-board--final .calls-cascade-board__count {
  color: var(--qb-call-final-ink) !important;
  background: color-mix(in srgb, var(--qb-final-call) 9%, #fff) !important;
  border-color: color-mix(in srgb, var(--qb-final-call) 24%, transparent) !important;
}

.qd-rebuild .qb-recent__item:has(.qb-recent__badge--serving) .qb-recent__card,
.qd-rebuild .qb-recent__item:has(.qb-recent__badge--completed) .qb-recent__card,
.qd-rebuild .qb-recent__item:has(.qb-recent__badge--first) .qb-recent__card,
.qd-rebuild .qb-recent__item:has(.qb-recent__state--serving) .qb-recent__card,
.qd-rebuild .qb-recent__item:has(.qb-recent__state--first) .qb-recent__card {
  --call-accent: var(--qb-call-normal) !important;
  --call-accent-soft: color-mix(in srgb, var(--qb-call-normal) 10%, transparent) !important;
  --call-accent-border: color-mix(in srgb, var(--qb-call-normal) 34%, transparent) !important;
}

.qd-rebuild .qb-recent__item:has(.qb-recent__badge--recall) .qb-recent__card,
.qd-rebuild .qb-recent__item:has(.qb-recent__badge--repeat) .qb-recent__card,
.qd-rebuild .qb-recent__item:has(.qb-recent__state--recall) .qb-recent__card,
.qd-rebuild .qb-recent__item:has(.qb-recent__state--repeat) .qb-recent__card {
  --call-accent: var(--qb-call-repeat) !important;
  --call-accent-soft: color-mix(in srgb, var(--qb-call-repeat) 10%, transparent) !important;
  --call-accent-border: color-mix(in srgb, var(--qb-call-repeat) 34%, transparent) !important;
}

.qd-rebuild .qb-recent__item:has(.qb-recent__badge--final) .qb-recent__card,
.qd-rebuild .qb-recent__item:has(.qb-recent__state--final) .qb-recent__card {
  --call-accent: var(--qb-final-call) !important;
  --call-accent-soft: color-mix(in srgb, var(--qb-final-call) 10%, transparent) !important;
  --call-accent-border: color-mix(in srgb, var(--qb-final-call) 36%, transparent) !important;
}

.qd-rebuild .qb-recent__badge--first,
.qd-rebuild .qb-recent__badge--serving,
.qd-rebuild .qb-recent__badge--completed,
.qd-rebuild .qb-recent__state--first,
.qd-rebuild .qb-recent__state--serving {
  color: var(--qb-call-normal-dark) !important;
  background: color-mix(in srgb, var(--qb-call-normal) 10%, #fff) !important;
  border-block-start-color: color-mix(in srgb, var(--qb-call-normal) 20%, transparent) !important;
  border-color: color-mix(in srgb, var(--qb-call-normal) 22%, transparent) !important;
}

.qd-rebuild .qb-recent__item:first-child .qb-recent__badge--first,
.qd-rebuild .qb-recent__item:first-child .qb-recent__badge--serving,
.qd-rebuild .qb-recent__item:first-child .qb-recent__badge--completed,
.qd-rebuild .qb-recent__item:first-child .qb-recent__state--first,
.qd-rebuild .qb-recent__item:first-child .qb-recent__state--serving {
  color: #fff !important;
  background: linear-gradient(180deg, var(--qb-call-normal) 0%, var(--qb-call-normal-dark) 100%) !important;
  border-block-start-color: color-mix(in srgb, var(--qb-call-normal) 35%, transparent) !important;
  border-color: transparent !important;
}

.qd-rebuild .qb-recent__badge--recall,
.qd-rebuild .qb-recent__badge--repeat,
.qd-rebuild .qb-recent__state--recall,
.qd-rebuild .qb-recent__state--repeat {
  color: var(--qb-call-repeat-dark) !important;
  background: color-mix(in srgb, var(--qb-call-repeat) 10%, #fff) !important;
  border-block-start-color: color-mix(in srgb, var(--qb-call-repeat) 20%, transparent) !important;
  border-color: color-mix(in srgb, var(--qb-call-repeat) 22%, transparent) !important;
}

.qd-rebuild .qb-recent__item:first-child .qb-recent__badge--recall,
.qd-rebuild .qb-recent__item:first-child .qb-recent__badge--repeat,
.qd-rebuild .qb-recent__item:first-child .qb-recent__state--recall,
.qd-rebuild .qb-recent__item:first-child .qb-recent__state--repeat {
  color: #fff !important;
  background: linear-gradient(180deg, var(--qb-call-repeat) 0%, var(--qb-call-repeat-dark) 100%) !important;
  border-block-start-color: color-mix(in srgb, var(--qb-call-repeat) 35%, transparent) !important;
  border-color: transparent !important;
}

.qd-rebuild .qb-recent__badge--final,
.qd-rebuild .qb-recent__state--final {
  color: var(--qb-call-final-ink) !important;
  background: color-mix(in srgb, var(--qb-final-call) 10%, #fff) !important;
  border-block-start-color: color-mix(in srgb, var(--qb-final-call) 20%, transparent) !important;
  border-color: color-mix(in srgb, var(--qb-final-call) 22%, transparent) !important;
}

.qd-rebuild .qb-recent__item:first-child .qb-recent__badge--final,
.qd-rebuild .qb-recent__item:first-child .qb-recent__state--final {
  color: #fff !important;
  background: linear-gradient(180deg, var(--qb-final-call) 0%, color-mix(in srgb, var(--qb-final-call) 76%, #5f3f00) 100%) !important;
  border-block-start-color: color-mix(in srgb, var(--qb-final-call) 35%, transparent) !important;
  border-color: transparent !important;
}

@media (max-height: 760px) {
  .qd-rebuild .qb__now.qd-pro__now--multi {
    padding-block-start: clamp(42px, 4.6vh, 56px) !important;
  }

  .qd-rebuild .qb__now.qd-pro__now--multi .calls-cascade-board {
    flex-basis: clamp(102px, 16vh, 140px) !important;
    min-height: clamp(102px, 16vh, 140px) !important;
    max-height: clamp(118px, 20vh, 158px) !important;
  }

  .qd-rebuild .qb__now.qd-pro__now--multi .calls-cascade-board__cell {
    min-block-size: clamp(70px, 8.8vh, 92px) !important;
  }
}

/* Waiting panel premium density pass: readable hallway cards without visual bulk. */
.qd-rebuild .qb-wait {
  background: #f6f9fb !important;
  border-color: #d5e1ea !important;
  box-shadow: 0 8px 24px rgba(15, 38, 68, 0.06) !important;
}

.qd-rebuild .qb-wait__head {
  min-height: clamp(62px, 6.3vh, 86px) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 249, 251, 0.98) 100%) !important;
  border-block-end-color: #d8e4ed !important;
}

.qd-rebuild .qb-wait__title-wrap {
  padding: clamp(10px, 1vh, 15px) clamp(14px, 1.12vw, 20px) !important;
  gap: clamp(8px, 0.75vw, 12px) !important;
}

.qd-rebuild .qb-wait__head-metric {
  flex-basis: clamp(54px, 16%, 82px) !important;
  padding: clamp(6px, 0.65vh, 10px) clamp(8px, 0.75vw, 12px) !important;
  background:
    linear-gradient(165deg, rgba(15, 118, 110, 0.08) 0%, rgba(15, 118, 110, 0.025) 56%, rgba(255, 255, 255, 0.2) 100%) !important;
}

.qd-rebuild .qb-wait__head-metric-num {
  color: rgba(15, 118, 110, 0.44) !important;
  font-size: clamp(24px, 2.35vw, 36px) !important;
  letter-spacing: -0.035em !important;
}

.qd-rebuild .qb-wait__head-metric-label {
  display: none !important;
}

.qd-rebuild .qb-wait__icon {
  inline-size: clamp(34px, 2.65vw, 43px) !important;
  block-size: clamp(34px, 2.65vw, 43px) !important;
  border-radius: 12px !important;
  color: #0f766e !important;
  background: linear-gradient(145deg, rgba(15, 118, 110, 0.115), rgba(15, 118, 110, 0.045)) !important;
  border-color: rgba(15, 118, 110, 0.18) !important;
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.08) !important;
}

.qd-rebuild .qb-wait__title {
  color: #071a33 !important;
  font-size: clamp(22px, 1.85vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

.qd-rebuild .qb-wait__estimate-note {
  color: #607285 !important;
  font-size: clamp(10px, 0.82vw, 13px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

.qd-rebuild .qb-wait__body {
  background: #eef4f7 !important;
}

.qd-rebuild .qb-wait__list,
.qd-rebuild #next-list:not(:has(.next-list-empty)) {
  --qb-wait-card-min: 80;
  gap: clamp(3px, 0.28vh, 5px) !important;
  padding: clamp(4px, 0.34vh, 6px) clamp(4px, 0.34vw, 6px) !important;
  background: #eef4f7 !important;
}

.qd-rebuild .qb-wait .qd-next-card {
  min-height: clamp(80px, 7.8vh, 108px) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(203, 216, 226, 0.92) !important;
  border-inline-start: 4px solid var(--qb-wait-accent-strip) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(250, 252, 253, 0.99) 100%) !important;
  box-shadow: 0 2px 7px rgba(15, 38, 68, 0.045) !important;
}

.qd-rebuild .qb-wait .qd-next-card--first {
  border-inline-start-width: 4px !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--qb-wait-accent-strip) 16%, transparent) !important;
}

.qd-rebuild .qb-wait__row {
  min-height: inherit !important;
}

.qd-rebuild .qb-wait__ticket-box {
  flex-basis: clamp(92px, 26%, 120px) !important;
  padding: clamp(6px, 0.55vh, 9px) clamp(5px, 0.46vw, 8px) !important;
  background:
    linear-gradient(180deg, rgba(248, 251, 253, 0.96) 0%, rgba(242, 247, 250, 0.96) 100%),
    var(--qb-wait-accent-ticket) !important;
  border-inline-end-color: color-mix(in srgb, var(--qb-wait-accent-strip) 14%, #dce7ef) !important;
}

.qd-rebuild .qb-wait__ticket-box::after {
  inline-size: clamp(3px, 0.28vw, 5px) !important;
  opacity: 0.68 !important;
}

.qd-rebuild .qb-wait .qd-next-card__number {
  color: #071a33 !important;
  font-size: clamp(24px, 2.15vw, 38px) !important;
  font-weight: 900 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
  max-inline-size: 100%;
}

.qd-rebuild .qb-wait__panel {
  min-width: 0 !important;
}

.qd-rebuild .qb-wait__service-row {
  min-height: clamp(42px, 3.9vh, 53px) !important;
  padding: clamp(6px, 0.54vh, 9px) clamp(10px, 0.8vw, 14px) !important;
  border-block-end-color: rgba(216, 228, 237, 0.9) !important;
  background:
    linear-gradient(90deg, var(--qb-wait-accent-soft) 0%, rgba(255, 255, 255, 0) 46%) !important;
}

html[dir="rtl"] .qd-rebuild .qb-wait__service-row,
.qd-rebuild:dir(rtl) .qb-wait__service-row,
.qd-rebuild[dir="rtl"] .qb-wait__service-row {
  background:
    linear-gradient(270deg, var(--qb-wait-accent-soft) 0%, rgba(255, 255, 255, 0) 46%) !important;
}

.qd-rebuild .qb-wait .qd-next-card__service {
  color: #071a33 !important;
  font-size: clamp(21px, 1.92vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  padding-block: 0 !important;
}

.qd-rebuild .qb-wait .qd-next-card__service .qb-clinic-name__track {
  line-height: 1.08 !important;
}

.qd-rebuild .qb-wait__stats {
  min-height: clamp(34px, 3.2vh, 42px) !important;
  background: rgba(248, 251, 253, 0.65) !important;
}

.qd-rebuild .qb-wait__stat {
  align-items: center !important;
  gap: clamp(5px, 0.42vw, 7px) !important;
  padding: clamp(4px, 0.34vh, 6px) clamp(8px, 0.62vw, 11px) !important;
}

.qd-rebuild .qb-wait__stat-icon {
  inline-size: clamp(22px, 1.65vw, 27px) !important;
  block-size: clamp(22px, 1.65vw, 27px) !important;
  border-radius: 8px !important;
  color: color-mix(in srgb, var(--qb-wait-accent) 82%, #17344f) !important;
  background: var(--qb-wait-accent-icon) !important;
}

.qd-rebuild .qb-wait__stat-icon svg {
  inline-size: clamp(13px, 1vw, 16px) !important;
  block-size: clamp(13px, 1vw, 16px) !important;
}

.qd-rebuild .qb-wait__stat-body {
  gap: 0 !important;
  min-width: 0 !important;
}

.qd-rebuild .qb-wait__stat-value,
.qd-rebuild .qb-wait__stat--ahead .qb-wait__stat-value,
.qd-rebuild .qb-wait__stat--ahead .qb-wait__stat-body:has(.qb-wait__stat-label:empty) .qb-wait__stat-value {
  color: #071a33 !important;
  font-size: clamp(16px, 1.22vw, 22px) !important;
  font-weight: 900 !important;
  line-height: 1.5 !important;
  padding-bottom: 3px !important;
  letter-spacing: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-inline-size: 100% !important;
}

.qd-rebuild .qb-wait__stat-label {
  display: none !important;
}

.qd-rebuild .qb-wait__stat-divider {
  margin-block: clamp(5px, 0.42vh, 7px) !important;
  background: rgba(203, 216, 226, 0.9) !important;
}

.qd-rebuild .qb-wait__pager {
  min-block-size: clamp(34px, 3.4vh, 44px) !important;
  padding: clamp(5px, 0.48vh, 8px) clamp(10px, 0.82vw, 14px) !important;
  background: #f8fbfc !important;
  border-block-start-color: #dce7ef !important;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-page {
  color: #0f766e !important;
  background: rgba(15, 118, 110, 0.085) !important;
  border-color: rgba(15, 118, 110, 0.18) !important;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-dot.is-active,
.qd-rebuild .qb-wait__pager .qd-next__pager-progress-bar {
  background: linear-gradient(90deg, #0f766e, #148b83) !important;
}

@media (max-height: 760px) {
  .qd-rebuild .qb-wait__head {
    min-height: clamp(56px, 5.8vh, 72px) !important;
  }

  .qd-rebuild .qb-wait__list,
  .qd-rebuild #next-list:not(:has(.next-list-empty)) {
    --qb-wait-card-min: 74;
  }

  .qd-rebuild .qb-wait .qd-next-card {
    min-height: clamp(74px, 7.2vh, 96px) !important;
  }

  .qd-rebuild .qb-wait__ticket-box {
    flex-basis: clamp(86px, 25%, 110px) !important;
  }

  .qd-rebuild .qb-wait .qd-next-card__service {
    font-size: clamp(19px, 1.74vw, 30px) !important;
  }

  .qd-rebuild .qb-wait .qd-next-card__number {
    font-size: clamp(22px, 1.95vw, 34px) !important;
  }
}

/* Waiting card containment fix: prevent clinic names and ticket numbers from colliding. */
.qd-rebuild .qb-wait .qd-next-card,
.qd-rebuild .qb-wait__row,
.qd-rebuild .qb-wait__ticket-box,
.qd-rebuild .qb-wait__panel,
.qd-rebuild .qb-wait__service-row,
.qd-rebuild .qb-wait .qd-next-card__service,
.qd-rebuild .qb-wait__stats,
.qd-rebuild .qb-wait__stat,
.qd-rebuild .qb-wait__stat-body {
  min-width: 0 !important;
  overflow: hidden !important;
}

.qd-rebuild .qb-wait__ticket-box {
  flex: 0 0 clamp(92px, 26%, 130px) !important;
  max-inline-size: clamp(92px, 26%, 130px) !important;
}

.qd-rebuild .qb-wait .qd-next-card__number {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: clamp(20px, 1.72vw, 32px) !important;
  letter-spacing: -0.03em !important;
}

.qd-rebuild .qb-wait__service-row {
  contain: layout style;
  padding-inline: clamp(8px, 0.68vw, 12px) !important;
}

.qd-rebuild .qb-wait .qd-next-card__service {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: clamp(14px, 1.18vw, 22px) !important;
  line-height: 1.35 !important;
}

.qd-rebuild .qb-wait .qd-next-card__service .qb-clinic-name__track {
  display: block !important;
  max-inline-size: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  transform: none !important;
}

.qd-rebuild .qb-wait .qd-next-card__service.is-marquee {
  text-overflow: ellipsis !important;
}

.qd-rebuild .qb-wait .qd-next-card__service.is-marquee .qb-clinic-name__track {
  padding-inline-end: 0 !important;
  animation: none !important;
}

.qd-rebuild .qb-wait__stat-value,
.qd-rebuild .qb-wait__stat--ahead .qb-wait__stat-value,
.qd-rebuild .qb-wait__stat--ahead .qb-wait__stat-body:has(.qb-wait__stat-label:empty) .qb-wait__stat-value {
  font-size: clamp(13px, 1.05vw, 19px) !important;
}

.qd-rebuild .qb-wait__stat-icon {
  inline-size: clamp(20px, 1.46vw, 25px) !important;
  block-size: clamp(20px, 1.46vw, 25px) !important;
}

@media (max-height: 760px) {
  .qd-rebuild .qb-wait__ticket-box {
    flex-basis: clamp(86px, 25%, 110px) !important;
    max-inline-size: clamp(86px, 25%, 110px) !important;
  }

  .qd-rebuild .qb-wait .qd-next-card__service {
    font-size: clamp(13px, 1.05vw, 19px) !important;
  }

  .qd-rebuild .qb-wait .qd-next-card__number {
    font-size: clamp(18px, 1.5vw, 28px) !important;
  }
}


/* Waiting column priority: give the queue more room and allow service names to read. */
.qd-rebuild .qb__grid {
  grid-template-columns: minmax(220px, 1.18fr) minmax(0, 1.92fr) minmax(200px, 1.05fr) !important;
}

.qd-rebuild.queue-display--no-recent .qb__grid {
  grid-template-columns: minmax(260px, 1.28fr) minmax(0, 1.72fr) !important;
}

.qd-rebuild.queue-display--no-next .qb__grid {
  grid-template-columns: minmax(0, 1.85fr) minmax(200px, 1.05fr) !important;
}

.qd-rebuild.queue-display--no-next.queue-display--no-recent .qb__grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

.qd-rebuild .qb__col--center {
  grid-template-rows: clamp(220px, 32vh, 280px) minmax(0, 1fr) !important;
}

.qd-rebuild .qb__now-wrap {
  height: clamp(220px, 32vh, 280px) !important;
}

.qd-rebuild .qb__now-wrap > .qb__now-title {
  padding: clamp(8px, 0.8vw, 14px) clamp(16px, 1.8vw, 36px) !important;
}

.qd-rebuild .qb__now #now-serving-card {
  padding: clamp(6px, 0.8vh, 12px) clamp(16px, 2vw, 40px) !important;
}

.qd-rebuild .qb__feature {
  grid-template-columns: minmax(112px, 0.35fr) minmax(0, 1.65fr) !important;
}

.qd-rebuild.queue-display--no-qr .qb__feature {
  grid-template-columns: minmax(0, 1fr) !important;
}

.qd-rebuild .qb-wait__list,
.qd-rebuild #next-list:not(:has(.next-list-empty)) {
  --qb-wait-card-min: 64;
}

.qd-rebuild .qb-wait .qd-next-card {
  min-height: clamp(64px, 6vh, 92px) !important;
}

.qd-rebuild .qb-wait__ticket-box {
  flex: 0 0 clamp(92px, 26%, 130px) !important;
  max-inline-size: clamp(92px, 26%, 130px) !important;
}

.qd-rebuild .qb-wait__service-row {
  min-height: clamp(32px, 3vh, 48px) !important;
  align-items: center !important;
  padding-block: clamp(2px, 0.22vh, 4px) !important;
  contain: layout style !important;
}

.qd-rebuild .qb-wait .qd-next-card__service {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: unset;
  font-size: clamp(14px, 1.18vw, 22px) !important;
  line-height: 1.2 !important;
}

.qd-rebuild .qb-wait .qd-next-card__service .qb-clinic-name__track {
  display: block !important;
  max-inline-size: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
  animation: none !important;
  padding-inline-end: 0 !important;
  line-height: inherit !important;
}

.qd-rebuild .qb-wait .qd-next-card__service.is-marquee {
  text-overflow: ellipsis !important;
}

.qd-rebuild .qb-wait .qd-next-card__service.is-marquee .qb-clinic-name__track {
  animation: none !important;
}

.qd-rebuild .qb-wait__stats {
  min-height: clamp(22px, 2vh, 32px) !important;
}

@media (max-width: 1180px) {
  .qd-rebuild .qb__grid {
    grid-template-columns: minmax(200px, 1.14fr) minmax(0, 1.76fr) minmax(180px, 0.95fr) !important;
  }

  .qd-rebuild .qb-wait .qd-next-card__service {
    font-size: clamp(13px, 1.08vw, 20px) !important;
  }
}

@media (max-height: 760px) {
  .qd-rebuild .qb-wait__list,
  .qd-rebuild #next-list:not(:has(.next-list-empty)) {
    --qb-wait-card-min: 56;
  }

  .qd-rebuild .qb-wait .qd-next-card {
    min-height: clamp(56px, 5.2vh, 76px) !important;
  }

  .qd-rebuild .qb-wait__ticket-box {
    flex-basis: clamp(80px, 25%, 110px) !important;
    max-inline-size: clamp(80px, 25%, 110px) !important;
  }

  .qd-rebuild .qb-wait__service-row {
    min-height: clamp(28px, 2.5vh, 40px) !important;
  }

  .qd-rebuild .qb-wait .qd-next-card__service {
    font-size: clamp(13px, 1.05vw, 19px) !important;
  }
}


/* Media + QR containment: keep screen-setting states from sharing a grid slot. */
.qd-rebuild {
  --qb-feature-qr-column: clamp(220px, 22%, 360px);
}

.qd-rebuild:not(.queue-display--no-qr) .qb__feature:not(:has(#display-media-zone[hidden])) {
  grid-template-columns: minmax(var(--qb-feature-qr-column), 0.42fr) minmax(0, 1.58fr) !important;
  gap: clamp(8px, 0.85vw, 14px) !important;
}

.qd-rebuild:not(.queue-display--no-qr) .qb__feature:not(:has(#display-media-zone[hidden])) > .qb__qr-stage {
  grid-column: 1;
  grid-row: 1;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
  z-index: 2;
  background: var(--qb-card);
  border-inline-end: 1px solid var(--qb-line);
}

.qd-rebuild:not(.queue-display--no-qr) .qb__feature:not(:has(#display-media-zone[hidden])) > .qb__media {
  grid-column: 2;
  grid-row: 1;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
  contain: layout paint;
  z-index: 1;
}

.qd-rebuild:not(.queue-display--no-qr) .qb__feature:not(:has(#display-media-zone[hidden])) > .qb__qr-badge {
  inline-size: var(--qb-feature-qr-column);
  max-inline-size: var(--qb-feature-qr-column) !important;
}



.qd-rebuild .qb__feature > .qb__media:has(#display-media-zone[hidden]) {
  display: none !important;
}

.qd-rebuild:not(.queue-display--no-qr) .qb__feature:has(#display-media-zone[hidden]) {
  grid-template-columns: minmax(0, 1fr) !important;
}

.qd-rebuild:not(.queue-display--no-qr) .qb__feature:has(#display-media-zone[hidden]) > .qb__qr-stage {
  grid-column: 1 / -1;
}

.qd-rebuild.queue-display--no-qr .qb__feature > .qb__qr-stage,
.qd-rebuild.queue-display--no-qr .qb__qr-badge {
  display: none !important;
}

.qd-rebuild.queue-display--no-qr .qb__feature > .qb__qr-badge {
  display: none !important;
}

.qd-rebuild.queue-display--no-qr .qb__feature > .qb__media {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.qd-rebuild .qb__feature .queue-media,
.qd-rebuild .qb__feature .queue-media__frame,
.qd-rebuild .qb__feature .media-stage,
.qd-rebuild .qb__feature .queue-media__shell,
.qd-rebuild .qb__feature .media-player-shell {
  max-inline-size: 100%;
  box-sizing: border-box;
}

@media (max-width: 1180px), (max-height: 760px) {
  .qd-rebuild {
    --qb-feature-qr-column: clamp(180px, 24%, 300px);
  }
}

/* =====================================================================
   Waiting panel final polish — proportional, screen-adaptive sizing.
   Replaces oversized values with compact, elegant proportions that
   stay readable on TV hallway displays AND portrait kiosk screens.
   ===================================================================== */
.qd-rebuild {
  --qb-wait-card-radius: 8px;
  --qb-wait-surface: #fbfeff;
  --qb-wait-panel-bg: #edf7f8;
  --qb-wait-panel-bg-2: #f6fbfc;
  --qb-wait-line-soft: #d7e9ee;
  --qb-wait-line-softer: rgba(202, 224, 231, 0.58);
  --qb-wait-ink: #071a33;
  --qb-wait-muted: #5c6f83;
  --qb-wait-teal: #0f8f9a;
  --qb-wait-teal-soft: rgba(15, 143, 154, 0.11);
}

.qd-rebuild .qb-wait {
  background:
    radial-gradient(circle at 18% 0%, rgba(20, 184, 166, 0.075), transparent 38%),
    linear-gradient(180deg, var(--qb-wait-surface) 0%, var(--qb-wait-panel-bg-2) 100%) !important;
  border-color: #cfe5eb !important;
  box-shadow: 0 8px 24px rgba(7, 26, 61, 0.075) !important;
  overflow: hidden !important;
}

/* ---------- head ---------- */
.qd-rebuild .qb-wait__head {
  min-height: clamp(48px, 5.4vh, 74px) !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 16% 20%, rgba(15, 143, 154, 0.12), transparent 38%),
    linear-gradient(180deg, #fbfeff 0%, #f4fbfc 100%) !important;
  border-block-end: 1px solid var(--qb-wait-line-soft) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.82) !important;
}

.qd-rebuild .qb-wait__title-wrap {
  flex: 1 1 auto !important;
  padding: clamp(9px, 0.95vh, 14px) clamp(12px, 1.05vw, 18px) !important;
  gap: clamp(8px, 0.65vw, 12px) !important;
  min-width: 0 !important;
}

.qd-rebuild .qb-wait__icon {
  inline-size: clamp(32px, 2.6vw, 46px) !important;
  block-size: clamp(32px, 2.6vw, 46px) !important;
  border-radius: 10px !important;
  color: var(--qb-wait-teal) !important;
  background:
    linear-gradient(145deg, rgba(15, 143, 154, 0.12), rgba(15, 143, 154, 0.045)) !important;
  border: 1px solid rgba(15, 143, 154, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 4px 12px rgba(15, 143, 154, 0.075) !important;
}

.qd-rebuild .qb-wait__icon svg {
  inline-size: clamp(16px, 1.3vw, 22px) !important;
  block-size: clamp(16px, 1.3vw, 22px) !important;
}

.qd-rebuild .qb-wait__title {
  color: var(--qb-wait-ink) !important;
  font-size: clamp(17px, 1.42vw, 26px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}

.qd-rebuild .qb-wait__estimate-note {
  color: var(--qb-wait-muted) !important;
  font-size: clamp(10px, 0.82vw, 14px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.qd-rebuild .qb-wait__head-metric {
  flex: 0 0 clamp(52px, 14%, 88px) !important;
  align-self: stretch !important;
  padding: clamp(6px, 0.55vh, 10px) clamp(8px, 0.7vw, 14px) !important;
  background:
    linear-gradient(180deg, rgba(15, 143, 154, 0.075), rgba(255, 255, 255, 0.35)) !important;
  border-inline-start: 1px solid var(--qb-wait-line-softer) !important;
}

.qd-rebuild .qb-wait__head-metric-body {
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
}

.qd-rebuild .qb-wait__head-metric-num {
  color: rgba(15, 143, 154, 0.46) !important;
  font-size: clamp(22px, 1.85vw, 36px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}

.qd-rebuild .qb-wait__head-metric-label {
  display: none !important;
}

/* ---------- body / list ---------- */
.qd-rebuild .qb-wait__body {
  padding: 0 !important;
  background:
    radial-gradient(circle at 8% 14%, rgba(15, 143, 154, 0.065), transparent 32%),
    linear-gradient(180deg, var(--qb-wait-panel-bg-2) 0%, var(--qb-wait-panel-bg) 100%) !important;
  overflow: hidden !important;
}

.qd-rebuild .qb-wait__list,
.qd-rebuild #next-list:not(:has(.next-list-empty)) {
  --qb-wait-card-min: 78;
  gap: clamp(6px, .55vh, 9px) !important;
  padding: clamp(7px, .68vh, 11px) clamp(7px, .58vw, 11px) !important;
  background: transparent !important;
}

/* ---------- card shell ---------- */
.qd-rebuild .qb-wait .qd-next-card {
  min-height: clamp(78px, 7.4vh, 108px) !important;
  border-radius: var(--qb-wait-card-radius) !important;
  border: 1px solid rgba(207, 223, 232, 0.82) !important;
  box-shadow: 0 4px 14px rgba(7, 26, 61, 0.055) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 254, 255, 0.94) 100%),
    linear-gradient(90deg, var(--qb-wait-accent-soft, rgba(92, 120, 147, 0.04)), transparent 52%) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Accent strip — prominent left/right edge per-service color */
.qd-rebuild .qb-wait .qd-next-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: clamp(4px, 0.36vw, 6px);
  background: color-mix(in srgb, var(--qb-wait-accent, #5c7893) 82%, var(--qb-wait-teal));
  opacity: 0.68;
  pointer-events: none;
  z-index: 2;
}

/* Subtle accent glow along the strip edge */
.qd-rebuild .qb-wait .qd-next-card::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: clamp(56px, 4.6vw, 82px);
  background: linear-gradient(to right, color-mix(in srgb, var(--qb-wait-accent, #5c7893) 6%, transparent), transparent);
  pointer-events: none;
  z-index: 0;
}

html[dir="rtl"] .qd-rebuild .qb-wait .qd-next-card::after,
.qd-rebuild[dir="rtl"] .qb-wait .qd-next-card::after {
  background: linear-gradient(to left, var(--qb-wait-accent-soft, rgba(92,120,147,0.04)), transparent);
}

/* Odd/even alternating tint for visual rhythm */
.qd-rebuild .qb-wait .qd-next-card:nth-child(even) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 252, 253, 0.96) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--qb-wait-accent, #5c7893) 5%, transparent), transparent 54%) !important;
}

/* First card — stronger accent presence */
.qd-rebuild .qb-wait .qd-next-card--first {
  border-color: color-mix(in srgb, var(--qb-wait-accent, #5c7893) 18%, #cfe3eb) !important;
  box-shadow: 0 5px 16px rgba(7, 26, 61, 0.07) !important;
}

.qd-rebuild .qb-wait .qd-next-card--first::before {
  opacity: 0.92;
  inline-size: clamp(5px, 0.44vw, 7px);
}

.qd-rebuild .qb-wait .qd-next-card--first::after {
  inline-size: clamp(56px, 4.8vw, 84px);
  background: linear-gradient(to right,
    color-mix(in srgb, var(--qb-wait-accent, #5c7893) 7%, transparent),
    transparent
  );
}

html[dir="rtl"] .qd-rebuild .qb-wait .qd-next-card--first::after,
.qd-rebuild[dir="rtl"] .qb-wait .qd-next-card--first::after {
  background: linear-gradient(to left,
    color-mix(in srgb, var(--qb-wait-accent, #5c7893) 7%, transparent),
    transparent
  );
}

/* ---------- card inner layout ---------- */
.qd-rebuild .qb-wait__row {
  display: flex !important;
  align-items: stretch !important;
  min-height: inherit !important;
  border-radius: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.qd-rebuild .qb-wait__ticket-box {
  flex: 0 0 clamp(92px, 26%, 130px) !important;
  max-inline-size: clamp(92px, 26%, 130px) !important;
  min-inline-size: 0 !important;
  padding: clamp(2px, 0.2vh, 4px) clamp(5px, 0.42vw, 8px) !important;
  background:
    linear-gradient(180deg,
      rgba(252, 254, 255, 0.96) 0%,
      color-mix(in srgb, var(--qb-wait-accent, #5c7893) 5%, rgba(244, 249, 252, 0.96)) 100%
    ) !important;
  border-inline-end: 1px solid var(--qb-wait-line-softer) !important;
  overflow: hidden !important;
}

.qd-rebuild .qb-wait__ticket-box::after {
  display: none !important;
}

.qd-rebuild .qb-wait .qd-next-card__number {
  color: color-mix(in srgb, var(--qb-wait-accent, #5c7893) 58%, var(--qb-wait-ink)) !important;
  font-size: clamp(22px, 1.9vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
  text-align: center !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.qd-rebuild .qb-wait .qd-next-card--first .qd-next-card__number {
  color: color-mix(in srgb, var(--qb-wait-accent, #5c7893) 68%, #041020) !important;
}

/* ---------- panel / service ---------- */
.qd-rebuild .qb-wait__panel {
  min-width: 0 !important;
  background: transparent !important;
}

html[dir="rtl"] .qd-rebuild .qb-wait__panel,
.qd-rebuild:dir(rtl) .qb-wait__panel,
.qd-rebuild[dir="rtl"] .qb-wait__panel {
  background: transparent !important;
}

.qd-rebuild .qb-wait__service-row {
  flex: 1 1 auto !important;
  min-height: clamp(32px, 3vh, 48px) !important;
  padding: clamp(6px, 0.5vh, 10px) clamp(10px, 0.8vw, 14px) !important;
  align-items: center !important;
  border-block-end: 1px solid rgba(216, 228, 237, 0.44) !important;
  background: transparent !important;
  contain: layout style !important;
}

.qd-rebuild .qb-wait .qd-next-card__service {
  display: block !important;
  color: var(--qb-wait-ink) !important;
  font-size: clamp(14px, 1.18vw, 22px) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  text-wrap: unset;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.qd-rebuild .qb-wait .qd-next-card__service .qb-clinic-name__track {
  display: block !important;
  max-inline-size: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
  animation: none !important;
  line-height: inherit !important;
  padding-inline-end: 0 !important;
}

/* ---------- stats row ---------- */
.qd-rebuild .qb-wait__stats {
  flex: 0 0 auto !important;
  min-height: clamp(34px, 3.2vh, 48px) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--qb-wait-accent, #5c7893) 4%, rgba(248, 252, 253, 0.92)),
      rgba(245, 250, 252, 0.88)
    ) !important;
}

.qd-rebuild .qb-wait__stat {
  align-items: center !important;
  gap: clamp(5px, 0.4vw, 8px) !important;
  padding: clamp(5px, 0.45vh, 8px) clamp(8px, 0.6vw, 12px) !important;
}

.qd-rebuild .qb-wait__stat-icon {
  inline-size: clamp(22px, 1.72vw, 30px) !important;
  block-size: clamp(22px, 1.72vw, 30px) !important;
  border-radius: 7px !important;
  color: color-mix(in srgb, var(--qb-wait-accent) 70%, #16364f) !important;
  background: color-mix(in srgb, var(--qb-wait-accent) 9%, #f8fafc) !important;
  border: 1px solid color-mix(in srgb, var(--qb-wait-accent) 12%, transparent) !important;
}

.qd-rebuild .qb-wait__stat-icon svg {
  inline-size: clamp(12px, 0.95vw, 16px) !important;
  block-size: clamp(12px, 0.95vw, 16px) !important;
}

.qd-rebuild .qb-wait__stat-value,
.qd-rebuild .qb-wait__stat--ahead .qb-wait__stat-value,
.qd-rebuild .qb-wait__stat--ahead .qb-wait__stat-body:has(.qb-wait__stat-label:empty) .qb-wait__stat-value {
  color: #071a33 !important;
  font-size: clamp(13px, 1.05vw, 19px) !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  padding-bottom: 3px !important;
  letter-spacing: 0 !important;
  max-inline-size: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.qd-rebuild .qb-wait__stat-label {
  display: none !important;
}

.qd-rebuild .qb-wait__stat-divider {
  margin-block: clamp(5px, 0.45vh, 7px) !important;
  background: rgba(203, 216, 226, 0.64) !important;
}

/* ---------- pager ---------- */
.qd-rebuild .qb-wait__pager {
  position: relative !important;
  min-block-size: clamp(48px, 4.6vh, 64px) !important;
  padding: clamp(8px, 0.7vh, 12px) clamp(12px, 1vw, 20px) !important;
  background:
    linear-gradient(180deg, rgba(252, 254, 255, 0.98) 0%, rgba(244, 250, 252, 0.98) 100%) !important;
  border-block-start: 1px solid var(--qb-wait-line-soft) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  text-align: center !important;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-page {
  color: var(--qb-wait-teal) !important;
  background: var(--qb-wait-teal-soft) !important;
  border: 1px solid rgba(15, 143, 154, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  font-size: clamp(11px, 0.8vw, 14px) !important;
  padding: 3px 14px !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-range {
  color: #4a5568 !important;
  font-weight: 700 !important;
  font-size: clamp(10px, 0.72vw, 13px) !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-inline-size: 100% !important;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-progress {
  position: absolute !important;
  top: 0 !important;
  inset-inline: 0 !important;
  block-size: 3px !important;
  background: rgba(15, 143, 154, 0.08) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  flex: none !important;
}

.qd-rebuild .qb-wait__pager .qd-next__pager-dot.is-active,
.qd-rebuild .qb-wait__pager .qd-next__pager-progress-bar {
  background: linear-gradient(90deg, #087b86, #14b8a6) !important;
}

/* ---------- responsive compact ---------- */
@media (max-height: 760px) {
  .qd-rebuild .qb-wait__head {
    min-height: clamp(42px, 4.6vh, 60px) !important;
  }

  .qd-rebuild .qb-wait__list,
  .qd-rebuild #next-list:not(:has(.next-list-empty)) {
    --qb-wait-card-min: 66;
    gap: clamp(3px, .32vh, 5px) !important;
  }

  .qd-rebuild .qb-wait .qd-next-card {
    min-height: clamp(66px, 6.2vh, 90px) !important;
  }

  .qd-rebuild .qb-wait__ticket-box {
    flex-basis: clamp(80px, 25%, 110px) !important;
    max-inline-size: clamp(80px, 25%, 110px) !important;
  }

  .qd-rebuild .qb-wait .qd-next-card__service {
    font-size: clamp(13px, 1.05vw, 19px) !important;
  }

  .qd-rebuild .qb-wait .qd-next-card__number {
    font-size: clamp(18px, 1.5vw, 28px) !important;
  }
}

/* QR Stage Container clearance override for the floating badge */
.qd-rebuild .qb-qr {
  padding-block-start: clamp(46px, 5.2vh, 66px) !important;
}

.qd-rebuild .qb-wait__stats,
.qd-rebuild .qb-wait__stat,
.qd-rebuild .qb-wait__stat-body,
.qd-rebuild .qb-wait__service-row,
.qd-rebuild .qb-wait .qd-next-card,
.qd-rebuild .qb-wait__row,
.qd-rebuild .qb-wait__panel {
  overflow: visible !important;
}
/* ====================================================
   Compact Call Card — World-Class Design
   States: .is-idle | .is-speaking | .qc-call-bar--calling/repeat/final
   ==================================================== */

.compact-call-card {
    --cc-accent: var(--qc-accent-primary, #16dccd);
    --cc-accent-glow: color-mix(in srgb, var(--cc-accent) 35%, transparent);
    --cc-transition: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    gap: 0;
    padding: clamp(10px, 1.3vw, 26px) clamp(16px, 2vw, 40px);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    /* Appearance */
    border-radius: var(--qb-radius-lg, 28px);
    border: 1px solid color-mix(in srgb, var(--cc-accent) 45%, transparent);
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--cc-accent) 22%, transparent), transparent),
        linear-gradient(160deg, rgba(4, 18, 32, 0.97) 0%, rgba(8, 14, 30, 0.98) 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cc-accent) 12%, transparent),
        0 8px 32px rgba(0, 0, 0, 0.45),
        0 0 48px color-mix(in srgb, var(--cc-accent) 14%, transparent);
    color: #fff;
    text-align: center;
    transition:
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        background 0.4s ease;
}

/* State: color variants */
.compact-call-card.qc-call-bar--calling { --cc-accent: var(--qc-accent-primary, #16dccd); }
.compact-call-card.qc-call-bar--repeat  { --cc-accent: var(--qc-call-repeat, #d97706); }
.compact-call-card.qc-call-bar--final   { --cc-accent: var(--qc-call-final, #dc2626); }

/* State: idle */
.compact-call-card.is-idle {
    --cc-accent: #64748b;
    border-color: rgba(255,255,255,0.08);
    background: linear-gradient(160deg, rgba(12, 20, 36, 0.95) 0%, rgba(6, 12, 26, 0.98) 100%);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* State: speaking */
.compact-call-card.is-speaking {
    animation: ccc-pulse 2s var(--qc-ease-soft, ease-in-out) infinite;
}

@keyframes ccc-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--cc-accent) 18%, transparent),
            0 8px 32px rgba(0,0,0,0.45),
            0 0 40px color-mix(in srgb, var(--cc-accent) 18%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 2px color-mix(in srgb, var(--cc-accent) 50%, transparent),
            0 8px 32px rgba(0,0,0,0.45),
            0 0 70px color-mix(in srgb, var(--cc-accent) 35%, transparent);
    }
}

/* ── Ripple rings (decorative, only visible during speaking) ── */
.ccc-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--cc-accent) 28%, transparent);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.85);
}
.compact-call-card.is-speaking .ccc-ring--1 {
    animation: ccc-ring-out 2.2s var(--qc-ease-soft, ease) 0s infinite;
}
.compact-call-card.is-speaking .ccc-ring--2 {
    animation: ccc-ring-out 2.2s var(--qc-ease-soft, ease) 0.7s infinite;
}
@keyframes ccc-ring-out {
    0%   { opacity: 0.7; transform: scale(0.82); }
    100% { opacity: 0;   transform: scale(1.12); }
}

/* ── Main content layout ── */
.compact-call-card__main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.1vh, 18px);
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
}

/* ── Status Badge ── */
.call-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: clamp(5px, 0.52vw, 10px) clamp(14px, 1.45vw, 30px);
    border-radius: 999px;
    font-size: clamp(12px, 1.05vw, 20px);
    font-weight: 800;
    letter-spacing: 0.2px;
    color: var(--cc-accent);
    background: color-mix(in srgb, var(--cc-accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cc-accent) 32%, transparent);
    transition:
        color var(--cc-transition),
        background var(--cc-transition),
        border-color var(--cc-transition);
    white-space: nowrap;
}

.compact-call-card.is-idle .call-status-badge {
    color: #94a3b8;
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.10);
}

/* Status dot — pulsing when speaking */
.call-status-badge__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cc-accent);
    flex-shrink: 0;
    transition: background var(--cc-transition);
}
.compact-call-card.is-speaking .call-status-badge__dot {
    animation: ccc-dot-blink 1.4s ease-in-out infinite;
    box-shadow: 0 0 8px var(--cc-accent);
}
.compact-call-card.is-idle .call-status-badge__dot {
    background: #64748b;
    box-shadow: none;
}
@keyframes ccc-dot-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.25; }
}

/* ── Number Row ── */
.call-number-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 1.2vw, 18px);
    width: 100%;
}

/* ── Ticket Number ── */
.call-ticket-number {
    font-size: clamp(52px, min(7vw, 12vh), 156px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    text-shadow: 0 4px 28px color-mix(in srgb, var(--cc-accent) 40%, transparent);
    transition:
        font-size 0.3s ease,
        text-shadow var(--cc-transition);
    min-width: 0;
}
.compact-call-card.is-idle .call-ticket-number {
    font-size: clamp(40px, min(5.5vw, 9vh), 112px);
    text-shadow: none;
    color: #e2e8f0;
}

/* ── Sound Bars (animated equalizer) ── */
.sound-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: clamp(28px, 3vh, 44px);
    flex-shrink: 0;
}
.sound-bars--mirror {
    transform: scaleX(-1);
}
.sound-bar {
    width: clamp(3px, 0.3vw, 5px);
    background: var(--cc-accent);
    border-radius: 3px;
    height: 30%;
    opacity: 0;
    transition:
        opacity 0.3s ease,
        background var(--cc-transition);
}

/* Animate bars while speaking */
.compact-call-card.is-speaking .sound-bar { opacity: 0.9; }
.compact-call-card.is-speaking .sound-bar:nth-child(1) { animation: ccc-bar 1.1s ease-in-out 0.00s infinite; }
.compact-call-card.is-speaking .sound-bar:nth-child(2) { animation: ccc-bar 1.1s ease-in-out 0.15s infinite; }
.compact-call-card.is-speaking .sound-bar:nth-child(3) { animation: ccc-bar 0.9s ease-in-out 0.08s infinite; }
.compact-call-card.is-speaking .sound-bar:nth-child(4) { animation: ccc-bar 1.3s ease-in-out 0.22s infinite; }
.compact-call-card.is-speaking .sound-bar:nth-child(5) { animation: ccc-bar 0.8s ease-in-out 0.04s infinite; }
@keyframes ccc-bar {
    0%, 100% { height: 20%; }
    50%       { height: 90%; }
}

/* ── Service name ── */
.call-clinic-name {
    font-size: clamp(2rem, min(3.2vw, 5vh), 4.5rem);
    font-weight: 800;
    color: rgba(255,255,255,0.92);
    letter-spacing: 0.2px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    transition: color 0.3s ease;
}
.compact-call-card.is-idle .call-clinic-name {
    color: rgba(255,255,255,0.55);
    font-size: clamp(1.35rem, min(2.4vw, 3.5vh), 2.5rem);
}

/* ── Details block (service + room) ── */
.compact-call-card__details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1vw, 20px);
    width: 100%;
}

/* ── Location Pill ── */
.call-location-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: clamp(8px, 0.9vh, 12px) clamp(14px, 1.6vw, 22px);
    font-size: clamp(1rem, min(1.55vw, 2.35vh), 1.65rem);
    font-weight: 700;
    color: rgba(255,255,255,0.70);
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    transition: all 0.3s ease;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.call-location-pill__icon {
    flex-shrink: 0;
    opacity: 0.65;
}
.compact-call-card.is-speaking .call-location-pill {
    border-color: color-mix(in srgb, var(--cc-accent) 22%, transparent);
    color: rgba(255,255,255,0.85);
}

/* ── Recent calls bar ── */
.qd-layout-compact .qc-call-bar__recent {
    position: relative;
    z-index: 1;
    padding-top: clamp(6px, 0.8vh, 10px);
    margin-top: clamp(4px, 0.5vh, 8px);
    border-top: 1px solid rgba(255,255,255,0.08);
}

/* Footer QR Code in Compact View */
.qd-layout-compact .qc-footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) auto !important;
}

.qd-layout-compact .qc-footer--compact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
}

.qd-layout-compact .qc-footer__qr {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    padding-inline-start: 16px;
    border-inline-start: 1px solid var(--qc-glass-border);
}

.qd-layout-compact .qc-footer__qr-wrapper {
    width: 68px;
    height: 68px;
    background: #ffffff;
    padding: 6px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--qc-shadow-sm);
}

.qd-layout-compact .qc-footer__qr-wrapper .join-qr-host {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.qd-layout-compact .qc-footer__qr-wrapper .join-qr-host :is(canvas, img) {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.qd-layout-compact .qc-footer__qr-wrapper .qr-placeholder {
    font-size: 10px;
    color: var(--qc-text-muted);
    text-align: center;
}

.qd-layout-compact .qc-footer__qr-copy {
    display: flex;
    flex-direction: column;
}

.qd-layout-compact .qc-footer__qr-copy strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--qc-accent-primary);
}