.demo-banner {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  z-index:         9999;
  background:      #106eea;
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  padding:         9px 48px 9px 16px;
  font-family:     'Raleway', sans-serif;
  font-size:       0.8rem;
  font-weight:     700;
  line-height:     1.4;
}

.demo-banner a {
  color:           #fff;
  text-decoration: underline;
  white-space:     nowrap;
  transition:      opacity 0.2s;
}

.demo-banner a:hover { opacity: 0.85; }

.demo-banner-close {
  position:    absolute;
  right:       14px;
  top:         50%;
  transform:   translateY(-50%);
  background:  none;
  border:      none;
  color:       rgba(255, 255, 255, 0.70);
  font-size:   1rem;
  cursor:      pointer;
  padding:     0;
  line-height: 1;
  transition:  color 0.2s;
}

.demo-banner-close:hover { color: #fff; }

/* Push app content below banner */
body.has-banner .counter-app,
body.has-banner .pos-app {
  padding-top: 38px;
}

/* Adjust fixed header when banner is visible */
body.has-banner .pos-header,
body.has-banner .counter-header {
  top: 38px;
}


/* ============================================================
   HUB DEMO ADDITIONS
   Append to the bottom of app.css
   These styles cover the flow explainer section and
   demo-specific overrides.
============================================================ */

/* ── Flow explainer ──────────────────────────────────────── */
.hub-flow {
  position:   relative;
  z-index:    1;
  padding:    0 32px 48px;
}

.hub-flow-inner {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--r-lg);
  padding:       28px 32px;
  display:       flex;
  flex-direction:column;
  gap:           20px;
}

.hub-flow-label {
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--text-faint);
  margin:         0;
}

.hub-flow-steps {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         8px;
}

.hub-flow-step {
  display:     flex;
  align-items: center;
  gap:         12px;
  background:  var(--surface-dim);
  border:      1px solid var(--border);
  border-radius: var(--r-md);
  padding:     12px 16px;
  flex:        1;
  min-width:   160px;
}

.hub-flow-step__icon {
  width:       38px;
  height:      38px;
  border-radius: var(--r-sm);
  background:  var(--surface);
  border:      1px solid var(--border);
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   1rem;
  color:       var(--accent);
  flex-shrink: 0;
}

.hub-flow-step__text {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.hub-flow-step__text strong {
  font-family:  var(--font-heading);
  font-size:    0.88rem;
  font-weight:  800;
  color:        #fff;
  line-height:  1.2;
}

.hub-flow-step__text span {
  font-size:   0.68rem;
  color:       var(--text-muted);
  line-height: 1.3;
}

.hub-flow-arrow {
  color:     var(--text-faint);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.hub-flow-note {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   0.78rem;
  font-weight: 600;
  font-family: var(--font-heading);
  color:       var(--teal);
  margin:      0;
}

.hub-flow-note i {
  font-size: 0.9rem;
}

/* ── Demo banner body offset ─────────────────────────────── */
body.has-banner .hub {
  padding-top: 38px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hub-flow-steps {
    flex-direction: column;
    align-items:    stretch;
  }

  .hub-flow-arrow {
    transform: rotate(90deg);
    align-self: center;
  }

  .hub-flow {
    padding: 0 16px 40px;
  }

  .hub-flow-inner {
    padding: 20px;
  }

  .hub-tools {
    padding: 0 16px 32px;
  }
}